/* Base layout, header, catalog and product shell for the TTBH demo store. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-md);line-height:var(--lh-md);
 color:var(--c-fg);background:var(--c-bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
a{color:var(--c-brand)}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter-sm)}
@media(min-width:768px){.container{padding:0 var(--gutter)}}
:focus-visible{outline:3px solid var(--c-focus-ring);outline-offset:2px;border-radius:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
 height:var(--btn-h);padding:0 var(--sp-6);border-radius:var(--r-md);border:1px solid transparent;
 font-size:var(--fs-base);font-weight:var(--fw-medium);text-decoration:none;white-space:nowrap;
 transition:background var(--motion-fast) var(--ease),box-shadow var(--motion-fast) var(--ease),
            border-color var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease)}
.btn-sm{height:var(--btn-h-sm);padding:0 var(--sp-4);font-size:var(--fs-sm)}
.btn-block{width:100%}
.btn-primary{background:var(--c-cta);border-color:var(--c-cta-border);color:var(--c-on-cta);
 font-weight:var(--fw-semibold);box-shadow:var(--sh-btn)}
.btn-primary:hover{background:var(--c-cta-hover)}
.btn-primary:active{background:var(--c-cta-active);box-shadow:var(--sh-xs)}
.btn-brand{background:var(--c-brand);border-color:var(--c-brand-active);color:var(--c-on-brand);
 font-weight:var(--fw-semibold);box-shadow:var(--sh-btn)}
.btn-brand:hover{background:var(--c-brand-hover)}
.btn-ghost{background:var(--c-bg);border-color:var(--c-border-strong);color:var(--c-fg);
 font-weight:var(--fw-semibold);box-shadow:var(--sh-btn)}
.btn-ghost:hover{background:var(--blue-100);border-color:var(--blue-300);color:var(--c-brand)}
.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}

/* ---------- demo strip ---------- */
.demobar{background:var(--c-fg);color:#fff;font-size:var(--fs-sm)}
.demobar-in{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;padding-block:var(--sp-2)}
.demobar b{color:var(--c-cta)}
.demobar nav{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin-left:auto}
.demobar a{color:#fff;text-decoration:none;opacity:.85}
.demobar a:hover,.demobar a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:3px}

/* ---------- header ---------- */
.hdr{background:var(--c-brand);color:#fff;position:sticky;top:0;z-index:var(--z-header)}
.hdr-in{display:flex;align-items:center;gap:var(--sp-4);padding-block:var(--sp-3)}
.logo{font-size:var(--fs-lg);white-space:nowrap;font-weight:var(--fw-regular);color:#fff;text-decoration:none}
.logo b{font-weight:var(--fw-bold)}
.search{flex:1;min-width:0;height:40px;background:#fff;border-radius:var(--r-md);display:flex;
 align-items:center;padding:0 var(--sp-4);color:var(--c-fg-subtle);font-size:var(--fs-base)}
.hdr-links{display:none;gap:var(--sp-5);font-size:var(--fs-base)}
@media(min-width:992px){.hdr-links{display:flex}}
@media(max-width:767px){.hdr-in{flex-wrap:wrap;gap:var(--sp-3)}
 .logo{flex:1 1 auto;font-size:var(--fs-md)}.search{order:3;flex:1 0 100%;height:44px}}
.nav{background:var(--c-brand);padding:0 0 var(--sp-3)}
.nav-in{display:flex;gap:var(--sp-2);overflow-x:auto;scrollbar-width:none}
.nav-in::-webkit-scrollbar{display:none}
.nav-pill{background:rgb(255 255 255/.15);color:#fff;font-size:var(--fs-base);font-weight:var(--fw-semibold);
 padding:0 var(--sp-4);min-height:var(--tap-min);display:inline-flex;align-items:center;
 border-radius:var(--r-full);white-space:nowrap;border:0}
.nav-pill:hover{background:rgb(255 255 255/.26)}

/* ---------- page furniture ---------- */
.page{padding:var(--sp-8) 0 var(--sp-12);background:var(--c-bg-muted);min-height:60vh}
.crumbs{font-size:var(--fs-sm);color:var(--c-fg-muted);padding-block:var(--sp-4)}
.crumbs a{color:var(--c-fg-muted);text-decoration:none}
.crumbs a:hover{color:var(--c-brand);text-decoration:underline}
.sect-title{margin:0 0 var(--sp-5);font-size:var(--fs-2xl);line-height:var(--lh-2xl);
 letter-spacing:var(--ls-2xl);font-weight:var(--fw-bold);display:flex;align-items:center;gap:var(--sp-3)}
.sect-title::before{content:"";width:4px;height:1em;background:var(--c-brand);border-radius:var(--r-full)}
.muted{color:var(--c-fg-muted);font-size:var(--fs-sm)}
.state{padding:var(--sp-8) 0;color:var(--c-fg-muted);text-align:center}
.state-error{color:var(--c-danger)}

/* ---------- forms and live indicator ---------- */
.field{width:100%;font:inherit;color:var(--c-fg);background:var(--c-bg);
 border:1px solid var(--c-border-strong);border-radius:var(--r-md);padding:var(--sp-3);
 margin-bottom:var(--sp-3)}
textarea.field{min-height:96px;resize:vertical;line-height:var(--lh-base)}
.field:focus{border-color:var(--c-brand);outline:none;box-shadow:0 0 0 3px var(--c-brand-subtle)}
.form-error{color:var(--c-danger);font-size:var(--fs-sm);font-weight:var(--fw-semibold);
 margin-bottom:var(--sp-3)}
.form-hint{color:var(--c-fg-muted);font-size:var(--fs-sm);margin:0 0 var(--sp-3)}
label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semibold);margin-bottom:var(--sp-2)}
.qa-live{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--c-fg-muted)}
.qa-live::before{content:"";width:8px;height:8px;border-radius:var(--r-full);background:var(--c-free)}
.qa-live[data-live="off"]::before{background:var(--c-border-strong)}

/* ---------- product cards ---------- */
.cards{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
@media(max-width:560px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}}
.card{background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-lg);
 padding:var(--sp-4);display:flex;flex-direction:column;box-shadow:var(--sh-sm);
 transition:box-shadow var(--motion-base) var(--ease),border-color var(--motion-base) var(--ease)}
.card:hover{box-shadow:var(--sh-md);border-color:var(--c-border-strong)}
.card-badges{display:flex;gap:var(--sp-1);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.badge{font-size:var(--fs-xs);font-weight:var(--fw-bold);padding:3px var(--sp-2);
 border-radius:var(--r-full);white-space:nowrap}
.badge-time{background:var(--c-cta-subtle);color:var(--c-on-cta-subtle)}
.badge-war{background:var(--c-brand-subtle);color:var(--c-brand-subtle-fg)}
.badge-zalo{background:var(--c-brand-subtle);color:var(--c-brand-subtle-fg)}
.badge-web{background:var(--c-bg-muted);color:var(--c-fg-muted);border:1px solid var(--c-border)}
.badge-match{background:var(--c-cta-subtle);color:var(--c-on-cta-subtle)}
.card-title{margin:0 0 var(--sp-3);font-size:var(--fs-base);line-height:var(--lh-base);
 font-weight:var(--fw-semibold);min-height:calc(var(--lh-base)*2)}
.card-title a{color:inherit;text-decoration:none}
.card-title a:hover{color:var(--c-brand)}
.card-price{font-size:var(--fs-xl);line-height:1.1;font-weight:var(--fw-bold);
 color:var(--c-price);font-variant-numeric:tabular-nums}
.card-free{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--c-free);
 margin:var(--sp-2) 0 var(--sp-4)}
.card .btn{margin-top:auto}
.thumb{aspect-ratio:3/2;border-radius:var(--r-md);overflow:hidden;background:var(--c-bg-tint);
 margin-bottom:var(--sp-3);display:flex;align-items:center;justify-content:center}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb-fallback{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--c-brand);
 text-align:center;padding:var(--sp-3);line-height:var(--lh-sm)}

/* ---------- product detail ---------- */
.product{display:grid;gap:var(--sp-6);grid-template-columns:1fr;background:var(--c-bg);
 border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--sh-sm)}
@media(min-width:900px){.product{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 gap:var(--sp-10);padding:var(--sp-8)}}
.gallery{border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;background:var(--c-bg-tint)}
.gallery .thumb{aspect-ratio:4/3;margin:0;border-radius:0}
.product h1{margin:0 0 var(--sp-3);font-size:var(--fs-2xl);line-height:var(--lh-2xl);
 letter-spacing:var(--ls-2xl);font-weight:var(--fw-bold)}
.price-lg{font-size:var(--fs-3xl);line-height:1.1;font-weight:var(--fw-bold);
 font-variant-numeric:tabular-nums;margin-bottom:var(--sp-2)}
.stock{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--c-free);margin-bottom:var(--sp-5)}
.buy-row{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.buy-row .btn{flex:1 1 200px}
.facts{list-style:none;margin:0;padding:var(--sp-4);border:1px solid var(--c-border);
 border-radius:var(--r-md);background:var(--c-bg-subtle)}
.facts li{font-size:var(--fs-sm);line-height:var(--lh-base);padding-block:var(--sp-1);
 display:flex;gap:var(--sp-2)}
.facts li::before{content:"✓";color:var(--c-free);font-weight:var(--fw-bold)}

/* ---------- footer ---------- */
.ft{background:var(--c-bg-subtle);border-top:1px solid var(--c-border);padding:var(--sp-10) 0 var(--sp-8)}
.ft-grid{display:grid;gap:var(--sp-7);grid-template-columns:1fr}
@media(min-width:700px){.ft-grid{grid-template-columns:repeat(3,1fr)}}
.ft h4{margin:0 0 var(--sp-3);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em;
 color:var(--c-fg-subtle);font-weight:var(--fw-bold)}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{font-size:var(--fs-base)}
.ft a{color:var(--c-fg-muted);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--tap-min)}
.ft a:hover{color:var(--c-brand);text-decoration:underline;text-underline-offset:3px}
.hotline{font-size:var(--fs-2xl);font-weight:var(--fw-bold);color:var(--c-brand);
 font-variant-numeric:tabular-nums;margin:0 0 var(--sp-1)}
.ft-legal{margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:1px solid var(--c-border);
 font-size:var(--fs-sm);color:var(--c-fg-subtle)}