:root {
  --green: oklch(36% 0.08 150);
  --green-deep: oklch(26% 0.06 150);
  --leaf: oklch(62% 0.15 140);
  --gold: oklch(66% 0.12 80);
  --gold-soft: oklch(88% 0.07 85);
  --cream: oklch(97% 0.02 90);
  --paper: oklch(99% 0.008 90);
  --ink: oklch(24% 0.03 150);
  --muted: oklch(46% 0.03 150);
  --line: oklch(88% 0.025 100);
  --radius: 18px;
  --font-body: "Be Vietnam Pro", system-ui, sans-serif;
  --font-head: "Playfair Display", Georgia, serif;
  --wrap: min(1120px, 100% - 32px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1rem/1.7 var(--font-body); color: var(--ink); background: var(--cream); }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; color: var(--green-deep); margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 1.2rem + 4vw, 3.9rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.wrap { width: var(--wrap); margin-inline: auto; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px 12px; z-index: 99; }

/* header */
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in oklch, var(--paper) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { min-width:0; white-space:nowrap; display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 1.25rem var(--font-head); color: var(--green-deep); }
.brand svg { width: 34px; height: 34px; }
.brand small { display: block; font: 500 .62rem var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: -2px; }
.nav { display: none; gap: 4px; align-items: center; }
.nav a { padding: 8px 10px; border-radius: 99px; text-decoration: none; font-size: .92rem; font-weight: 500; color: var(--ink); transition: background .2s, color .2s; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--gold-soft); color: var(--green-deep); }
.nav .cta { background: var(--green); color: #fff; margin-left: 6px; }
.nav .cta:hover { background: var(--green-deep); color: #fff; }
.menu-btn { flex-shrink:0; min-height:44px; border: 1px solid var(--line); background: var(--paper); border-radius: 99px; padding: 8px 16px; font: 500 .9rem var(--font-body); cursor: pointer; }
@media (max-width: 1279px) {
.nav.open { max-height:calc(100dvh - 80px); overflow-y:auto; overscroll-behavior:contain; display: flex; flex-direction: column; align-items: stretch; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); padding: 12px 16px 20px; border-bottom: 1px solid var(--line); }
.nav.open a { min-height:44px; }
}
@media (min-width: 1280px) { .nav { display: flex; gap:2px; } .nav a { white-space:nowrap; padding:8px 7px; font-size:.86rem; } .menu-btn { display: none; } }

/* hero */
.hero { padding: clamp(32px, 6vw, 88px) 0; background:
  radial-gradient(900px 420px at 85% 0%, color-mix(in oklch, var(--gold-soft) 70%, transparent), transparent 70%), var(--cream); }
.hero-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 860px) { .hero-grid { grid-template-columns: 1.1fr .9fr; } }
.eyebrow { display: inline-block; font: 600 .75rem var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 56ch; }
.hero-img { position: relative; }
.arch { border-radius: 999px 999px var(--radius) var(--radius); overflow: hidden; aspect-ratio: 4/5; box-shadow: 0 30px 60px -30px color-mix(in oklch, var(--green-deep) 55%, transparent); border: 6px solid var(--paper); }
.arch img { width: 100%; height: 100%; object-fit: cover; }
.badge { position: absolute; left: -8px; bottom: 28px; background: var(--green); color: #fff; padding: 12px 18px; border-radius: 14px; font-size: .85rem; line-height: 1.35; box-shadow: 0 14px 30px -12px rgba(0,0,0,.4); transform: rotate(-3deg); }
.badge b { display: block; font: 700 1.05rem var(--font-head); color: var(--gold-soft); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 99px; font: 600 .95rem var(--font-body); text-decoration: none; border: 2px solid var(--green); color: var(--green); background: transparent; cursor: pointer; transition: transform .25s var(--ease), background .2s, color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn.primary { background: var(--green); color: #fff; }
.btn.primary:hover { background: var(--green-deep); }
.btn:focus-visible, .nav a:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* sections */
section { padding: clamp(44px, 7vw, 96px) 0; }
.alt { background: var(--paper); border-block: 1px solid var(--line); }
.dark { background: var(--green-deep); color: #e9efe6; } .dark h2, .dark h3 { color: #fff; } .dark a { color: var(--gold-soft); }
.sec-head { max-width: 62ch; margin-bottom: 36px; }
.answer { border-left: 4px solid var(--gold); background: var(--paper); padding: 18px 22px; border-radius: 0 var(--radius) var(--radius) 0; font-size: 1.08rem; max-width: 74ch; box-shadow: 0 1px 0 var(--line); }
.grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
a.card:hover { transform: translateY(-5px); box-shadow: 0 24px 40px -24px color-mix(in oklch, var(--green-deep) 50%, transparent); }
.card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.card .pad { padding: 18px 20px 22px; }
.card h3 { margin-bottom: .3em; }
.card p { color: var(--muted); font-size: .95rem; margin: 0; }
.tag { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.more { margin-top: 12px; font-weight: 600; font-size: .9rem; color: var(--green); }

.split { display: grid; gap: 36px; align-items: center; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; } .split.rev > :first-child { order: 2; } }
.split img { border-radius: var(--radius); width: 100%; }
.ticks { list-style: none; padding: 0; margin: 0 0 1em; } .ticks li { padding-left: 28px; position: relative; margin: .5em 0; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 8px; border-left: 3px solid var(--leaf); border-bottom: 3px solid var(--leaf); transform: rotate(-45deg); }
.steps { counter-reset: s; list-style: none; padding: 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: s; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold-soft); color: var(--green-deep); font: 700 1rem var(--font-head); margin-bottom: 10px; }
.steps b { display: block; font-family: var(--font-head); font-size: 1.1rem; color: var(--green-deep); }

table { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); font-size: .95rem; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--green); color: #fff; font-weight: 600; }
tr:last-child td { border-bottom: 0; }
.tbl { overflow-x: auto; }

details.faq { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 0 20px; margin-bottom: 10px; }
details.faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details.faq summary::after { content: "+"; font-size: 1.3rem; color: var(--gold); line-height: 1; }
details.faq[open] summary::after { content: "–"; }
details.faq p { color: var(--muted); }
.video { max-width: 340px; margin-inline: auto; border-radius: 28px; overflow: hidden; border: 6px solid var(--paper); box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); background: #000; }
.video video { width: 100%; aspect-ratio: 9/16; object-fit: cover; }

/* page head & article */
.page-head { padding: clamp(36px, 5vw, 72px) 0 clamp(20px, 3vw, 36px); }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 14px; } .crumbs a { color: var(--muted); }
.prose { max-width: 70ch; } .prose h2 { margin-top: 1.6em; font-size: 1.7rem; } .prose li { margin: .35em 0; }
.cta-band { background: var(--green); color: #fff; border-radius: 28px; padding: clamp(28px, 5vw, 56px); display: grid; gap: 20px; }
.cta-band h2 { color: #fff; } .cta-band p { color: #d9e6d4; max-width: 56ch; }
.cta-band .btn { border-color: var(--gold-soft); color: var(--green-deep); background: var(--gold-soft); }
.cta-band .btn.ghost { background: transparent; color: #fff; }
@media (min-width: 800px) { .cta-band { grid-template-columns: 1.4fr 1fr; align-items: center; } .cta-band .btns { justify-content: flex-end; margin: 0; } }

form.contact { display: grid; gap: 14px; }
label { font-weight: 600; font-size: .9rem; display: grid; gap: 6px; }
input, textarea, select { font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); width: 100%; }

/* footer: keep link groups compact at narrow and zoomed widths */
.site-footer { background: var(--green-deep); color: #cfdccb; padding: 48px 0 calc(88px + env(safe-area-inset-bottom)); font-size: .92rem; }
.site-footer h3 { color: #fff; font-size: 1.05rem; line-height:1.4; font-family: var(--font-body); font-weight: 600; margin-bottom:14px; }
.site-footer a { color: #e9efe6; text-decoration:none; overflow-wrap:anywhere; }
.site-footer a:hover { text-decoration:underline; }
.foot-grid { display: grid; grid-template-columns:minmax(0,1fr); gap: 28px; margin-bottom: 28px; }
.foot-grid > div { min-width:0; }
.foot-company p { max-width:60ch; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin:0; min-width:0; }
.site-footer li a { display:flex; align-items:center; min-height:44px; padding:7px 0; line-height:1.5; }
.foot-audience ul, .foot-explore ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; }
.foot-audience, .foot-explore { border-top:1px solid #ffffff26; padding-top:22px; }
@media (min-width:600px) {
  .foot-grid { grid-template-columns:minmax(0,1fr) minmax(0,2fr); column-gap:36px; }
  .foot-company { grid-column:1/-1; }
  .foot-audience ul { grid-template-columns:minmax(0,1fr); }
}
@media (min-width:1024px) {
  .foot-grid { grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr) minmax(0,1.5fr); }
  .foot-company { grid-column:auto; }
  .foot-audience, .foot-explore { border:0; padding-top:0; }
}
@media (max-width:380px) {
  .brand { gap:7px; font-size:1.05rem; }
  .brand small { font-size:.55rem; }
  .bar { gap:8px; }
  .menu-btn { padding-inline:12px; }
}
.legal { border-top: 1px solid color-mix(in oklch, #fff 15%, transparent); padding-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .8rem; color: #94a890; }
.by { font-size: .66rem; opacity: .55; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

.zalo-fab { position: fixed; right: 16px; bottom: 18px; z-index: 30; display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 99px; background: #0068ff; color: #fff; font: 600 .95rem var(--font-body); text-decoration: none; box-shadow: 0 14px 30px -10px rgba(0,104,255,.6); transition: transform .25s var(--ease); }
.zalo-fab:hover { transform: translateY(-3px); }
.zalo-fab:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 28px; padding: 18px 22px; border-radius: var(--radius); background: var(--gold-soft); border: 1px solid color-mix(in oklch, var(--gold) 40%, transparent); }
.strip p { margin: 0; font: 600 1.05rem var(--font-head); color: var(--green-deep); }

.quick { display: flex; gap: 8px; flex-wrap: wrap; }
.quick input[type=tel] { flex: 1 1 180px; min-width: 0; border-radius: 99px; border: 2px solid transparent; padding: 12px 18px; }
.quick .btn { white-space: nowrap; }
.quick-res { min-height: 1.4em; margin: 8px 0 0 !important; color: var(--gold-soft) !important; font-weight: 600; }
.cta-band .btns { margin-top: 10px; }
@media (min-width: 800px) { .cta-band .btns { justify-content: flex-start; } }

.note { font-size: .78rem; opacity: .8; margin: 6px 0 0 !important; }
form.lead { display: grid; gap: 12px; max-width: 520px; }
.lead-res { min-height: 1.4em; font-weight: 600; margin: 0; }
.two { display: grid; gap: 12px; } @media (min-width: 640px) { .two { grid-template-columns: 1fr 1fr; } }

.count { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-radius: var(--radius); background: var(--green-deep); color: #e9efe6; margin: 24px 0; }
.count-n { font: 700 2.4rem/1 var(--font-head); color: var(--gold-soft); min-width: 2ch; }
.count-t { margin: 0; font-weight: 500; }
.calc { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: clamp(18px, 3vw, 32px); display: grid; gap: 20px; }
@media (min-width: 800px) { .calc { grid-template-columns: 1.1fr .9fr; align-items: center; } }
.calc .ins { display: grid; gap: 12px; } .calc .outs { display: grid; gap: 10px; }
.calc .out { background: var(--cream); border-radius: 14px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.calc .out b { font: 700 1.5rem var(--font-head); color: var(--green); }
.calc small { color: var(--muted); }

.topbar { background: var(--gold-soft); color: var(--green-deep); font-size: .85rem; }
.topbar .wrap { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; padding-block: 7px; }
.topbar a { color: var(--green-deep); font-weight: 700; text-underline-offset: 3px; }

.dbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lead-res textarea { font-size: .85rem; }

.ctv-hero .quick input[type=tel] { border: 2px solid var(--line); background: #fff; font-size: 1.05rem; }
.ctv-hero .quick-res { color: var(--green) !important; }
.ctv-hero .quick .btn { background: var(--green); color: #fff; border-color: var(--green); font-size: 1.05rem; padding: 14px 26px; }
.big-zero { display: inline-block; font: 600 clamp(3rem, 9vw, 5.5rem)/1 var(--font-body); color: var(--gold); font-variant-numeric: lining-nums; }

.vid { display: grid; gap: 6px; justify-items: center; max-width: 267px; margin-inline: auto; }
.vid iframe { width: 100%; max-width: 267px; aspect-ratio: 9/16; height: auto; border-radius: 18px; background: #000; }
.vid a { font-size: .8rem; color: var(--muted); }
.vgrid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.vgrid h3 { font-size: 1.05rem; margin: 8px 0 2px; } .vgrid p { color: var(--muted); font-size: .9rem; margin: 0; }
.rel { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); } .rel ul { padding-left: 18px; }
.sku td input { width: 110px; } .sku .tbl { max-height: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; } .chips a { padding: 6px 14px; border-radius: 99px; background: var(--gold-soft); color: var(--green-deep); text-decoration: none; font-weight: 600; font-size: .88rem; }

.vid-btn { width: 100%; max-width: 267px; aspect-ratio: 9/16; border: 0; border-radius: 18px; cursor: pointer; display: grid; place-content: center; gap: 10px; padding: 18px; text-align: center; color: #fff; background: radial-gradient(120% 80% at 50% 0%, var(--green) 0%, var(--green-deep) 70%); font-family: var(--font-body); }
.vid-btn b { font: 600 .95rem/1.35 var(--font-body); } .vid-btn small { opacity: .75; font-size: .75rem; }
.vid-ic { width: 54px; height: 54px; border-radius: 50%; background: var(--gold-soft); color: var(--green-deep); display: grid; place-items: center; font-size: 1.3rem; margin: 0 auto; padding-left: 4px; }
.vid-btn:hover .vid-ic { transform: scale(1.08); } .vid-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.vid-local video { width: 100%; max-width: 267px; aspect-ratio: 9/16; border-radius: 18px; background: #000; object-fit: cover; }

.quote-summary { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:20px; background:var(--gold-soft); border-radius:var(--radius); }
.quote-summary > div { flex:1 1 260px; }
.quote-summary b { color:var(--green-deep); font-size:1.1rem; }
.quote-summary p { margin:4px 0 0; font-size:.88rem; }
.sku tr.quote-selected { background:var(--gold-soft); }
.sku td select { min-width:82px; }
.sku .tbl a { color:var(--green-deep); text-underline-offset:3px; }

.quote-products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.quote-product { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--paper); transition:border-color .2s,box-shadow .2s; }
.quote-product.quote-selected { border-color:var(--green); box-shadow:0 0 0 2px var(--green); }
.quote-product-image { display:block; position:relative; background:var(--gold-soft); }
.quote-product-image img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.quote-product-image .tag { position:absolute; left:14px; bottom:14px; padding:5px 10px; border-radius:99px; background:var(--paper); color:var(--green-deep); font-size:.75rem; }
.quote-product-body { display:flex; flex-direction:column; flex:1; padding:20px; }
.quote-product-body h2 { font-family:var(--font-body); font-size:1.05rem; line-height:1.45; }
.quote-product-body h2 a { text-decoration:none; color:var(--green-deep); }
.quote-product-body > p { font-size:.85rem; color:var(--muted); margin-bottom:12px; }
.quote-product-body > small { display:block; color:var(--muted); font-size:.75rem; margin-top:auto; }
.quote-product-controls { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.quote-product-controls label { font-size:.8rem; }
.quote-product-controls input,.quote-product-controls select { width:100%; min-width:0; background:var(--paper); }
.quote-contact { scroll-margin-top:100px; display:grid; grid-template-columns:1fr 1.2fr; gap:36px; padding:32px; background:var(--paper); border:1px solid var(--line); border-radius:22px; margin-top:24px; }
.quote-contact-fields { display:grid; gap:14px; min-width:0; }
.quote-contact h2 { font-size:1.8rem; }
.quote-contact p { color:var(--muted); font-size:.9rem; }
.quote-selected-list { border-top:1px solid var(--line); padding-top:16px; font-size:.85rem; }
.quote-selected-list p { margin-bottom:8px; color:var(--green-deep); }
@media(max-width:900px) { .quote-products { grid-template-columns:repeat(2,minmax(0,1fr)); } .quote-contact { grid-template-columns:1fr; gap:20px; } }
@media(max-width:520px) { .quote-products { gap:12px; } .quote-product-body { padding:12px; } .quote-product-body h2 { font-size:.9rem; } .quote-product-body > p { font-size:.78rem; } .quote-product-controls { grid-template-columns:1fr; gap:8px; } .quote-product-image .tag { left:8px; bottom:8px; font-size:.62rem; padding:3px 7px; } .quote-contact { padding:20px; } }

.quote-product-controls { grid-template-columns:minmax(0,1.35fr) minmax(72px,.8fr); }
.quote-quantity > label { display:block; font-weight:600; font-size:.8rem; margin-bottom:6px; }
.quantity-stepper { display:flex; align-items:stretch; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper); }
.quantity-stepper button { flex:0 0 44px; min-height:48px; padding:0; border:0; background:var(--cream); color:var(--green-deep); font:600 1.3rem var(--font-body); cursor:pointer; }
.quantity-stepper input { appearance:textfield; -moz-appearance:textfield; border:0; border-radius:0; padding:8px 0; text-align:center; font-size:16px; width:100%; min-width:0; }
.quantity-stepper input::-webkit-inner-spin-button { appearance:none; }
.quantity-stepper button:focus-visible { outline:3px solid var(--green); outline-offset:-3px; }
.quote-product-controls select { min-height:50px; font-size:16px; }
.quote-mobile-bar { display:none; }
@media(max-width:640px) {
  .has-quote-shop { padding-bottom:100px; }
  .quote-products { grid-template-columns:1fr; gap:16px; }
  .quote-product { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:start; padding:12px; gap:14px; }
  .quote-product-image { border-radius:12px; overflow:hidden; }
  .quote-product-image img { aspect-ratio:1; }
  .quote-product-image .tag { position:static; display:block; font-size:.65rem; border-radius:0; padding:6px; text-align:center; }
  .quote-product-body { padding:0; }
  .quote-product-body h2 { font-size:.95rem; }
  .quote-product-body > p { font-size:.8rem; line-height:1.55; margin-bottom:8px; }
  .quote-product-body > small { font-size:.7rem; }
  .quote-product-controls { margin-top:12px; gap:8px; grid-template-columns:minmax(0,1.3fr) minmax(68px,.8fr); }
  .quantity-stepper button { flex-basis:36px; }
  .quote-mobile-bar { position:fixed; display:flex; justify-content:space-between; align-items:center; gap:10px; left:0; right:0; bottom:0; z-index:40; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--paper); border-top:1px solid var(--line); box-shadow:0 -8px 30px #173c2110; }
  .quote-mobile-bar > span { font-size:.8rem; font-weight:600; color:var(--green-deep); }
  .quote-mobile-bar .btn { min-height:48px; padding:10px 18px; }
  .has-quote-shop .zalo-fab { bottom:calc(92px + env(safe-area-inset-bottom)); }
  .quote-contact input,.quote-contact textarea { font-size:16px; min-height:48px; }
  .quote-summary { padding:16px; }
  .quote-summary > div { flex-basis:100%; }
  .quote-summary .btn { min-height:44px; padding:9px 16px; }
}
@media(max-width:380px) {
  .quote-product { grid-template-columns:84px minmax(0,1fr); gap:10px; padding:10px; }
  .quote-product-controls { grid-template-columns:1fr; }
  .quantity-stepper button { flex-basis:44px; }
}
.quote-products { scroll-margin-top:90px; }
@media(max-width:640px) {
  .quote-product-body > p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
  .quote-product-body > small { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
}

.customer-login { padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--cream); }
.customer-login > p { font-size:.85rem; margin:8px 0 12px; overflow-wrap:anywhere; }
.customer-login .btn { margin:4px 6px 0 0; padding:8px 14px; min-height:44px; font-size:.8rem; }
.auth-message { color:var(--muted); font-size:.85rem; }
.customer-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:28px; align-items:start; }
.customer-orders { display:grid; gap:20px; }
.customer-order { padding:26px; background:var(--paper); border:1px solid var(--line); border-radius:20px; overflow-wrap:anywhere; }
.customer-order h2 { font-family:var(--font-body); font-size:1.2rem; margin-top:12px; }
.order-status { display:inline-flex; padding:5px 12px; background:var(--gold-soft); color:var(--green-deep); border-radius:99px; font-size:.8rem; font-weight:600; }
.order-date { font-size:.8rem; color:var(--muted); }
.order-amount { font-size:1.2rem; font-weight:700; color:var(--green-deep); }
.order-note { white-space:pre-wrap; }
@media(max-width:700px) { .customer-layout { grid-template-columns:1fr; } .customer-order { padding:20px; } .customer-order .btn { width:100%; min-height:48px; } }
.account-auth-form { display:grid; gap:12px; margin-top:20px; }
.account-auth-form h3 { font-family:var(--font-body); font-size:1rem; }
.account-auth-form input { min-height:48px; font-size:16px; width:100%; }
.auth-options { display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; }
.auth-link { display:inline-block; padding:10px 0; color:var(--green-deep); background:none; border:0; font:inherit; font-size:.85rem; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
button:disabled { opacity:.55; cursor:default; }
.brand .brand-logo { width:55px; height:53px; object-fit:contain; mix-blend-mode:multiply; flex-shrink:0; }
.review-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.review-card { padding:24px; background:var(--paper); border:1px solid var(--line); border-radius:20px; }
.review-card p { font-size:.9rem; }
.review-check { background:var(--cream); padding:12px; border-radius:12px; }
@media(max-width:700px) { .review-grid { grid-template-columns:1fr; } .review-card { padding:20px; } }
.consult-dialog { width:min(560px,calc(100% - 32px)); max-height:calc(100dvh - 40px); border:1px solid var(--line); border-radius:24px; padding:0; background:var(--paper); color:var(--ink); box-shadow:0 24px 80px #10251840; }
.consult-dialog::backdrop { background:#10251899; backdrop-filter:blur(3px); }
.consult-panel { padding:28px; }
.consult-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.consult-heading h2 { font-size:1.8rem; }
.consult-close { display:grid; place-content:center; width:44px; height:44px; flex:0 0 44px; border:1px solid var(--line); border-radius:50%; background:var(--cream); color:var(--green-deep); font-size:1.6rem; cursor:pointer; }
.consult-panel > p { font-size:.9rem; color:var(--muted); }
.consult-panel input,.consult-panel textarea { width:100%; min-height:48px; font-size:16px; }
.consult-panel .btn { min-height:48px; }
.consult-open { overflow:hidden; }
@media(max-width:640px) { .consult-dialog { width:100%; max-width:none; max-height:92dvh; margin:auto 0 0; border-radius:24px 24px 0 0; } .consult-panel { padding:22px 20px calc(22px + env(safe-area-inset-bottom)); } .consult-heading h2 { font-size:1.6rem; } }

/* Compact previews; playback keeps the full original frame in a dialog. */
.real-footage { width:100%; max-width:360px; margin-inline:auto; }
.video-thumb { position:relative; display:block; width:100%; aspect-ratio:4/3; overflow:hidden; padding:0; border:0; border-radius:16px; background:#162519; cursor:pointer; }
.video-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.video-play { position:absolute; inset:0; margin:auto; display:grid; place-content:center; width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.96); color:var(--green-deep); font-size:26px; padding-left:3px; box-shadow:0 2px 16px #0003; }
.video-thumb:hover .video-play { background:var(--gold-soft); }
.video-thumb:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
.real-clips { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:start; }
.real-clips article { min-width:0; padding:12px; background:var(--paper); border:1px solid var(--line); border-radius:20px; }
.real-clips h3 { font-size:1rem; margin:12px 0 4px; }
.real-clips p { font-size:.85rem; color:var(--muted); margin:0; }
.vid-local { max-width:none; width:100%; }
.video-dialog { width:min(460px,94vw); max-height:94dvh; border:0; border-radius:20px; padding:12px; background:var(--paper); overflow:auto; }
.video-dialog::backdrop { background:#07130cd9; }
.video-dialog-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.video-dialog-bar h2 { font:600 1rem/1.4 var(--font-body); margin:0; }
.video-dialog video { display:block; width:100%; max-height:calc(94dvh - 165px); background:#000; border-radius:12px; object-fit:contain; }
.video-open { overflow:hidden; }
.video-play-error { margin:8px 0 0; font-size:.85rem; }
@media(max-width:650px) {
 .real-clips,.vgrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .real-clips article { padding:8px; border-radius:14px; }
 .video-thumb { border-radius:10px; }
 .real-clips h3,.vgrid h3 { font-size:.88rem; line-height:1.4; }
 .real-clips p { font-size:.78rem; line-height:1.5; }
 .video-play { width:56px; height:56px; font-size:23px; }
 .vid a { font-size:.7rem; }
}

.video-library .page-head { padding-block:28px; }
.video-library main > section { padding-block:28px; }

.market-proof { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:36px; }
.market-videos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.market-videos h3 { font:600 .9rem/1.5 var(--font-body); margin:10px 0 0; }
.market-videos > p { grid-column:1/-1; font-size:.78rem; color:var(--muted); margin:0; }
@media(max-width:850px) { .market-proof { grid-template-columns:1fr; gap:24px; } }

.report-nav { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.report-nav a { padding:10px 14px; border:1px solid var(--line); border-radius:99px; font-size:.85rem; text-decoration:none; background:var(--paper); }
.owner-report [id] { scroll-margin-top:100px; }
.owner-report .steps { margin-top:24px; }
@media print { .site-header,.topbar,.zalo-fab,.report-nav,.site-footer { display:none!important; } .owner-report section { padding:20px 0; } .review-card { break-inside:avoid; } }

/* Authentic source photographs; keep the full image visible. */
.evidence-photos { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
.evidence-photos figure { margin:0;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden; }
.evidence-photos a { display:block;background:#eef0e9; }
.evidence-photos img { display:block;width:100%;height:260px;object-fit:contain; }
.evidence-photos figcaption { padding:12px;font-size:.88rem;line-height:1.45; }
#ho-so { scroll-margin-top:100px; }
@media(max-width:650px) { .evidence-photos { gap:10px; } .evidence-photos img { height:190px; } .evidence-photos figcaption { font-size:.8rem;padding:10px; } }

.image-dialog { border:0;padding:16px;border-radius:18px;background:#14251c;color:white;width:min(1100px,96vw);max-width:96vw;max-height:94dvh; }
.image-dialog::backdrop { background:rgba(0,0,0,.85); }
.image-dialog-bar { display:flex;justify-content:space-between;align-items:center;gap:16px; }
.image-dialog-bar h2 { font-size:1rem;line-height:1.4;color:white;margin:0; }
.image-dialog-stage { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px; }
.image-dialog-stage img { display:block;max-width:calc(100% - 104px);max-height:74dvh;width:auto;height:auto;object-fit:contain; }
.image-dialog-stage button { flex:0 0 44px;width:44px;height:48px;border:1px solid #ffffff66;border-radius:12px;color:white;background:#ffffff18;font-size:32px;cursor:pointer; }
.image-dialog [data-image-count] { text-align:center;font-size:.85rem;margin:12px 0 0; }
.image-open { overflow:hidden; }.image-zoom-trigger { cursor:zoom-in; }
@media(max-width:650px){ .image-dialog{padding:12px;border-radius:12px;}.image-dialog-stage{position:relative;padding-bottom:58px;}.image-dialog-stage img{max-width:100%;margin:auto;max-height:68dvh;}.image-dialog-stage button{position:absolute;bottom:0;}.image-dialog-stage [data-image-prev]{left:calc(50% - 52px);}.image-dialog-stage [data-image-next]{right:calc(50% - 52px);} }

.edited-video-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }.edited-video-cards a { display:inline-block;padding:10px 0; }.edited-video-hero { max-width:700px;margin:auto; }.edited-video-hero .video-thumb { aspect-ratio:9/12; }.edited-video-hero .video-thumb img { object-fit:contain;background:#153c2d; }.edited-video-hero .video-play { width:80px;height:80px;font-size:32px; }.edited-video-hero .btns { margin-top:24px; }

.video-action:not([hidden]) { display:flex; justify-content:center; width:100%; margin-top:12px; min-height:48px; }
.video-action[hidden] { display:none; }