/* ==========================================================
   TAO BUD — Agarwood Incense
   Tông màu lấy cảm hứng từ ảnh Instagram: bê tông xám, nắng
   xiên + bóng lá, gỗ trầm nâu, hộp thiếc đen.
   ========================================================== */
:root {
  --bg: #ebe9e5;          /* bê tông sáng */
  --bg-2: #dfdcd6;
  --surface: #f5f3ef;
  --ink: #171615;         /* đen hộp thiếc */
  --ink-soft: #5d5853;
  --wood: #7a4a2c;        /* nâu trầm */
  --wood-2: #a8714b;
  --ember: #e8642c;
  --line: rgba(23, 22, 21, .12);
  --dark: #121110;
  --dark-2: #1c1a18;
  --on-dark: #ece7df;
  --on-dark-soft: #a49d93;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  --radius: 4px;
  --pad: clamp(16px, 5vw, 72px);
  --maxw: 1240px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* vân bê tông */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; }
h1 { font-size: clamp(3.2rem, 9vw, 7.5rem); }
h2 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); }
h3 { font-size: 1.6rem; }
em { font-style: italic; color: var(--wood); }
.eyebrow {
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 1.2rem; font-weight: 500;
}
.lead { font-size: 1.08rem; color: var(--ink-soft); max-width: 46ch; }

/* ---------- Bóng lá ---------- */
.leaf-shadow {
  position: fixed; top: -8vh; right: -12vw; width: min(70vw, 820px); height: auto;
  opacity: .13; z-index: -1; pointer-events: none; mix-blend-mode: multiply;
  transform-origin: 20% 100%;
  animation: sway 9s ease-in-out infinite alternate;
}
@keyframes sway { from { transform: rotate(-2deg) } to { transform: rotate(2.5deg) translateX(10px) } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.7rem; background: var(--ink); color: var(--bg);
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  border-radius: 999px; border: 1px solid var(--ink);
  transition: transform .35s var(--ease), background .35s, color .35s;
}
.btn:hover { background: var(--wood); border-color: var(--wood); transform: translateY(-2px); }
.btn-sm { padding: .6rem 1.2rem; font-size: .72rem; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { color: var(--bg); }
.btn-light { background: var(--on-dark); color: var(--dark); border-color: var(--on-dark); }
.btn-light:hover { background: var(--wood-2); border-color: var(--wood-2); color: var(--dark); }
.btn-ghost-light { background: transparent; color: var(--on-dark); border-color: rgba(236,231,223,.35); }
.btn-ghost-light:hover { background: var(--on-dark); color: var(--dark); }
.link-arrow { font-size: .85rem; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color .3s; }
.link-arrow:hover { color: var(--wood); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--pad);
  transition: background .4s, backdrop-filter .4s, padding .4s, box-shadow .4s;
}
.nav.scrolled {
  background: rgba(235, 233, 229, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding-block: .7rem; box-shadow: 0 1px 0 var(--line);
}
.brand { display: flex; align-items: center; gap: .7rem; font-family: var(--serif); font-size: 1.25rem; letter-spacing: .18em; font-weight: 600; }
.brand-mark { width: 34px; height: 34px; }
.nav-links { display: flex; align-items: center; gap: 2rem; font-size: .88rem; }
.nav-links a:not(.btn) { position: relative; }
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease);
}
.nav-links a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }
.menu-toggle { display: none; width: 40px; height: 40px; position: relative; }
.menu-toggle span { position: absolute; left: 9px; right: 9px; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease), top .35s; }
.menu-toggle span:first-child { top: 15px; } .menu-toggle span:last-child { top: 24px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 19px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 19px; transform: rotate(-45deg); }

/* ---------- Sections ---------- */
.section { padding: clamp(80px, 12vw, 160px) var(--pad); max-width: calc(var(--maxw) + 2 * var(--pad)); margin: 0 auto; }
.section.dark { max-width: none; background: var(--dark); color: var(--on-dark); }
.section.dark .eyebrow, .section.dark .lead { color: var(--on-dark-soft); }
.section.dark em { color: var(--wood-2); }
.section.dark > * { max-width: var(--maxw); margin-inline: auto; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(40px, 6vw, 72px); }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 2rem;
  padding: 120px var(--pad) 80px; max-width: calc(var(--maxw) + 2 * var(--pad)); margin: 0 auto; position: relative;
}
.hero h1 em { color: var(--wood); }
.hero-sub { margin: 2rem 0 2.6rem; max-width: 44ch; font-size: 1.08rem; color: var(--ink-soft); }
.hero-cta { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.hero-visual { display: flex; justify-content: center; align-items: flex-end; height: min(70vh, 620px); }
.plinth { position: relative; width: min(100%, 380px); height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.plinth::before { /* vệt nắng */
  content: ""; position: absolute; inset: 8% -20% 0 -20%;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 248, 235, .75) 45%, transparent 62%);
  filter: blur(18px); z-index: -1;
}
.cone { width: 92px; position: relative; z-index: 2; filter: drop-shadow(18px 10px 10px rgba(0,0,0,.18)); }
.ember { animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { opacity: .55; r: 3; } }
.dish { width: 240px; height: 34px; margin-top: -8px; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #2b2927, #0e0d0c 70%); box-shadow: 0 30px 40px -18px rgba(0,0,0,.45); }
.smoke { position: absolute; bottom: 132px; width: 160px; height: calc(100% - 140px); overflow: visible; }
.smoke path { fill: none; stroke: rgba(70, 64, 58, .35); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; filter: blur(1.5px); animation: smoke 7s ease-in-out infinite; }
.smoke path:nth-child(2) { animation-delay: 2.3s; stroke-width: 1.6; }
.smoke path:nth-child(3) { animation-delay: 4.6s; stroke-width: 3; opacity: .7; }
@keyframes smoke {
  0% { stroke-dashoffset: 520; opacity: 0; transform: translateY(0); }
  20% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; transform: translateY(-40px) scaleX(1.3); }
}
.scroll-hint { position: absolute; left: 50%; bottom: 28px; width: 22px; height: 36px; border: 1px solid var(--ink-soft); border-radius: 12px; transform: translateX(-50%); }
.scroll-hint span { position: absolute; left: 50%; top: 7px; width: 2px; height: 7px; background: var(--ink-soft); transform: translateX(-50%); animation: wheel 1.8s infinite; }
@keyframes wheel { to { top: 20px; opacity: 0; } }

/* ---------- Marquee ---------- */
.marquee { border-block: 1px solid var(--line); overflow: hidden; padding: 1.1rem 0; background: var(--surface); }
.marquee-track { display: flex; gap: 2.4rem; width: max-content; animation: marquee 38s linear infinite; font-family: var(--serif); font-size: 1.5rem; font-style: italic; white-space: nowrap; }
.marquee i { font-style: normal; color: var(--wood); font-size: .9rem; align-self: center; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Story ---------- */
.story-head { margin-bottom: 64px; }
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.story-card { background: var(--bg); padding: clamp(28px, 4vw, 48px); position: relative; min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; transition: background .4s; }
.story-card:hover { background: var(--surface); }
.story-card .glyph { position: absolute; top: 24px; right: 28px; font-family: serif; font-size: 3.4rem; color: var(--wood); opacity: .22; }
.story-card h3 { margin-bottom: .8rem; }
.story-card p { color: var(--ink-soft); }

/* ---------- Products ---------- */
.filters { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip { padding: .5rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; transition: all .3s; }
.chip:hover { border-color: var(--ink); }
.chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 36px); }
.product { display: flex; flex-direction: column; transition: opacity .4s, transform .4s; }
.product.hidden { display: none; }
.media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--bg-2); }
.media img, .ritual-visual img, .g img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.product:hover .media img, .product:hover .ph { transform: scale(1.05); }
.tag { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--surface); padding: .3rem .75rem; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; border-radius: 999px; }
.product-info { padding-top: 1.2rem; }
.product-info h3 { font-size: 1.5rem; margin-bottom: .4rem; }
.product-info p { color: var(--ink-soft); font-size: .92rem; min-height: 3em; }
.product-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.price { font-family: var(--serif); font-size: 1.25rem; }

/* ---------- Placeholder minh hoạ (tự ẩn khi có ảnh thật) ---------- */
.ph {
  position: absolute; inset: 0; transition: transform 1.2s var(--ease);
  background-color: #cfcbc4;
  background-image:
    linear-gradient(118deg, transparent 35%, rgba(255,250,240,.55) 48%, transparent 62%),
    radial-gradient(ellipse at 80% 10%, rgba(0,0,0,.12), transparent 50%);
}
.ph::after { content: ""; position: absolute; inset: 0; background-repeat: no-repeat; background-position: center 62%; background-size: 70%; }
.ph-cones::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Crect x='20' y='40' width='160' height='110' rx='10' fill='%23161514'/%3E%3Cg fill='%238a5634'%3E%3Cpath d='M40 140 50 60 60 140Z'/%3E%3Cpath d='M65 140 75 55 85 140Z'/%3E%3Cpath d='M90 140 100 62 110 140Z'/%3E%3Cpath d='M115 140 125 58 135 140Z'/%3E%3Cpath d='M140 140 150 64 160 140Z'/%3E%3C/g%3E%3C/svg%3E"); }
.ph-sticks::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cg stroke='%237a4a2c' stroke-width='3'%3E%3Cpath d='M60 150 90 10'/%3E%3Cpath d='M75 150 100 8'/%3E%3Cpath d='M90 150 110 12'/%3E%3Cpath d='M105 150 120 10'/%3E%3C/g%3E%3Cellipse cx='100' cy='150' rx='70' ry='8' fill='%23161514'/%3E%3C/svg%3E"); }
.ph-backflow::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cpath d='M70 20h60l-10 50H80z' fill='%23161514'/%3E%3Cpath d='M100 70c-6 20 10 30 0 50s8 25 0 35' stroke='%23fff' stroke-opacity='.7' stroke-width='5' fill='none'/%3E%3Cellipse cx='100' cy='150' rx='50' ry='8' fill='%23161514'/%3E%3C/svg%3E"); }
.ph-cat::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cpath d='M20 100q0-25 30-25h100q30 0 30 25v10q0 25-30 25H50q-30 0-30-25z' fill='%23161514'/%3E%3Cpath d='M28 80l6-20 12 16zM58 76l10-18 6 18z' fill='%23161514'/%3E%3Cellipse cx='110' cy='103' rx='45' ry='16' fill='%23f2efe9'/%3E%3Cpath d='M110 102 116 80 122 102Z' fill='%238a5634'/%3E%3C/svg%3E"); }
.ph-doll::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cellipse cx='100' cy='145' rx='70' ry='12' fill='%23e8c94a'/%3E%3Cpath d='M70 140q-6-50 30-70 36 20 30 70z' fill='%233b2a20'/%3E%3Ccircle cx='100' cy='88' r='22' fill='%23f3eee6'/%3E%3Cpath d='M100 66 106 40 112 66z' fill='%238a5634'/%3E%3C/svg%3E"); }
.ph-gift::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Crect x='30' y='50' width='140' height='100' fill='%23161514'/%3E%3Crect x='30' y='38' width='140' height='20' fill='%23262422'/%3E%3Cpath d='M100 38v112' stroke='%23a8714b' stroke-width='6'/%3E%3Ccircle cx='100' cy='34' r='10' fill='none' stroke='%23a8714b' stroke-width='5'/%3E%3C/svg%3E"); }
.ph-mesh::after { background-size: 85%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Crect x='10' y='10' width='180' height='140' fill='%23c9a978'/%3E%3Crect x='20' y='20' width='160' height='120' fill='%23595550'/%3E%3Cg fill='%238a5634'%3E%3Cpath d='M40 60l8-26 8 26z'/%3E%3Cpath d='M80 60l8-26 8 26z'/%3E%3Cpath d='M120 60l8-26 8 26z'/%3E%3Cpath d='M60 100l8-26 8 26z'/%3E%3Cpath d='M100 100l8-26 8 26z'/%3E%3Cpath d='M140 100l8-26 8 26z'/%3E%3Cpath d='M40 135l8-26 8 26z'/%3E%3Cpath d='M120 135l8-26 8 26z'/%3E%3C/g%3E%3C/svg%3E"); }
.ph-ritual::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Ccircle cx='100' cy='70' r='20' fill='%23c4744a'/%3E%3Cpath d='M60 150q0-55 40-60 40 5 40 60z' fill='%23c4744a'/%3E%3Cpath d='M150 150V40' stroke='%23161514' stroke-width='2'/%3E%3Cpath d='M150 40c-6-10 6-18 0-30' stroke='%23161514' stroke-opacity='.3' fill='none'/%3E%3C/svg%3E"); }
.has-img .ph { display: none; }

/* ---------- Craft ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid rgba(236,231,223,.15); }
.steps li { padding: 2rem 1.4rem 0 0; position: relative; }
.steps li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--wood-2); }
.steps .num { font-family: var(--serif); font-size: 3rem; color: var(--wood-2); line-height: 1; display: block; margin-bottom: 1rem; }
.steps h3 { margin-bottom: .6rem; font-size: 1.45rem; }
.steps p { color: var(--on-dark-soft); font-size: .92rem; }

/* ---------- Ritual ---------- */
.ritual { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.ritual-visual { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--bg-2); }
.ritual-list { list-style: none; margin: 2rem 0; }
.ritual-list li { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.ritual-list b { font-family: var(--serif); color: var(--wood); font-size: 1.2rem; margin-right: .6rem; }
.note { font-size: .85rem; color: var(--ink-soft); }

/* ---------- Gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.g { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--bg-2); }
.g:hover img, .g:hover .ph { transform: scale(1.06); }

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--line); max-width: 860px; }
details { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; padding: 1.5rem 0; font-family: var(--serif); font-size: 1.45rem; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--sans); font-weight: 300; transition: transform .3s; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 0 1.6rem; color: var(--ink-soft); max-width: 65ch; }

/* ---------- Contact ---------- */
.contact { text-align: center; }
.contact-inner { max-width: 760px; margin: 0 auto; }
.contact .lead { margin: 1.6rem auto 2.4rem; }
.contact-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer { background: var(--dark-2); color: var(--on-dark-soft); padding: 48px var(--pad); display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 2rem; align-items: center; }
.footer-brand { display: flex; gap: .9rem; align-items: center; }
.footer-brand .brand-mark { filter: invert(1); }
.footer-brand strong { display: block; color: var(--on-dark); font-family: var(--serif); letter-spacing: .18em; font-size: 1.1rem; }
.footer-brand span { font-size: .8rem; }


.copy { grid-column: 1 / -1; font-size: .78rem; border-top: 1px solid rgba(236,231,223,.1); padding-top: 1.5rem; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-top: 110px; text-align: left; }
  .hero-visual { height: 380px; order: -1; }
  .scroll-hint, .plinth::before { display: none; }
  .story-grid, .product-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
  .ritual { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .menu-toggle { display: block; z-index: 2; }
  .nav-links {
    position: fixed; inset: 0; background: var(--bg); flex-direction: column; justify-content: center; gap: 1.8rem;
    font-family: var(--serif); font-size: 1.8rem; opacity: 0; pointer-events: none; transition: opacity .4s;
  }
  .nav-links.open { opacity: 1; pointer-events: auto; }
  .nav-links .btn { font-family: var(--sans); }
  .story-grid, .product-grid, .steps { grid-template-columns: 1fr; }
  .story-card { min-height: 240px; }
  .footer { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Trích dẫn ---------- */
.quote { margin: clamp(56px, 8vw, 96px) auto 0; max-width: 820px; text-align: center; }
.quote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.35; }
.quote cite { display: block; margin-top: 1.2rem; font-style: normal; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.ph-tangerine::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Ccircle cx='100' cy='118' r='32' fill='%23e8742c'/%3E%3Cpath d='M92 88q8-10 18-2-8 6-18 2z' fill='%23234d2a'/%3E%3Cpath d='M100 90 106 10' stroke='%237a4a2c' stroke-width='2.5'/%3E%3C/svg%3E"); }

/* ---------- Icon mạng xã hội ---------- */
.ico { width: 20px; height: 20px; flex: none; }
.btn .ico { width: 18px; height: 18px; }
.btn-zalo { --zalo-text: var(--on-dark); }
.socials { display: flex; gap: .6rem; }
.socials a {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(236,231,223,.25); color: var(--on-dark); --zalo-text: var(--dark-2);
  transition: background .3s, color .3s, transform .3s var(--ease);
}
.socials a:hover { background: var(--on-dark); color: var(--dark); transform: translateY(-3px); --zalo-text: var(--on-dark); }
.socials-lg { justify-content: center; margin-top: 2.4rem; }
.socials-lg a { width: 52px; height: 52px; }
.socials-lg .ico { width: 24px; height: 24px; }
.address { margin-top: 1.6rem; font-size: .88rem; color: var(--on-dark-soft); }

/* ---------- Nút chat nổi ---------- */
.float-chat { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; }
.float-toggle {
  width: 58px; height: 58px; border-radius: 50%; background: var(--ink); color: var(--bg);
  display: grid; place-items: center; box-shadow: 0 10px 30px -8px rgba(0,0,0,.45); position: relative;
  transition: transform .35s var(--ease), background .3s;
}
.float-toggle:hover { transform: scale(1.06); background: var(--wood); }
.float-toggle::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--ink); animation: pulse 2.6s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(1.6); opacity: 0; } }
.float-toggle .ico { width: 24px; height: 24px; position: absolute; transition: opacity .25s, transform .35s var(--ease); }
.float-toggle .ico-close, .float-chat.open .ico-open { opacity: 0; transform: rotate(-90deg); }
.float-chat.open .ico-close { opacity: 1; transform: none; }
.float-chat.open .float-toggle::before { animation: none; opacity: 0; }
.float-menu { display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; }
.float-menu a {
  display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem .6rem .7rem; border-radius: 999px;
  color: #fff; font-size: .85rem; font-weight: 500; box-shadow: 0 8px 20px -8px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(12px) scale(.95); pointer-events: none;
  transition: opacity .3s, transform .35s var(--ease);
}
.float-menu .ico { width: 22px; height: 22px; }
.fc-zalo { background: #0068ff; --zalo-text: #0068ff; }
.fc-msg { background: linear-gradient(45deg, #0a7cff, #a033ff 60%, #ff5c87); }
.fc-ig { background: linear-gradient(45deg, #f9a43a, #e1306c 50%, #833ab4); }
.float-chat.open .float-menu a { opacity: 1; transform: none; pointer-events: auto; }
.float-chat.open .float-menu a:nth-child(2) { transition-delay: .05s; }
.float-chat.open .float-menu a:nth-child(1) { transition-delay: .1s; }

/* ==========================================================
   V2 — ảnh/video thật từ Instagram + trang chi tiết
   ========================================================== */

/* Hero */
.hero-media { position: relative; height: min(76vh, 680px); display: flex; justify-content: flex-end; align-items: center; }
.hero-photo { width: min(100%, 440px); height: 100%; border-radius: 220px 220px 6px 6px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0,0,0,.45); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 18s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.08) translateY(-10px); } }
.hero-clip { position: absolute; left: 0; bottom: 6%; width: 38%; max-width: 190px; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; border: 6px solid var(--surface); box-shadow: 0 24px 50px -20px rgba(0,0,0,.5); transform: rotate(-4deg); }
.hero-clip video { width: 100%; height: 100%; object-fit: cover; }
.hero-caption { position: absolute; top: 8%; left: 6%; font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.2; color: var(--wood); }

/* Product cards */
.product { color: inherit; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.sub-head { margin-top: clamp(72px, 9vw, 120px); }
.media img.alt { opacity: 0; transition: opacity .7s var(--ease), transform 1.2s var(--ease); }
.product:hover .media img.alt { opacity: 1; }
.product .line { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wood); min-height: 0; margin-bottom: .3rem; }
.product .short { min-height: 4.6em; }
.has-video { position: absolute; right: 14px; bottom: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(245,243,239,.9); display: grid; place-items: center; z-index: 2; }
.has-video .ico { width: 14px; height: 14px; }
.product:hover h3 { color: var(--wood); }
.product h3 { transition: color .3s; }

/* Craft photos */
.craft-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 24px); margin-bottom: clamp(56px, 7vw, 88px); }
.craft-photos figure { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); }
.craft-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.craft-photos figure:hover img { transform: scale(1.05); }
.craft-photos figcaption { position: absolute; left: 16px; bottom: 14px; font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.dark .quote cite { color: var(--on-dark-soft); }

/* Reels */
.reel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 28px); }
.reel { position: relative; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: var(--bg-2); }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel figcaption { position: absolute; inset: auto 0 0 0; padding: 3rem 1.2rem 1.1rem; color: #fff; font-family: var(--serif); font-style: italic; font-size: 1.25rem; background: linear-gradient(transparent, rgba(0,0,0,.55)); }

/* Ritual + gallery images */
.ritual-visual img { width: 100%; height: 100%; object-fit: cover; }
.gallery-grid { grid-template-columns: repeat(4, 1fr); }
.g img { width: 100%; height: 100%; object-fit: cover; }

/* Nav đặc trên trang con */
.page-solid .nav { background: rgba(235, 233, 229, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }

/* ---------- Trang chi tiết sản phẩm ---------- */
.pdp { max-width: calc(var(--maxw) + 2 * var(--pad)); margin: 0 auto; padding: 110px var(--pad) 40px; }
.crumbs { font-size: .8rem; color: var(--ink-soft); display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.crumbs a:hover { color: var(--wood); }
.crumbs b { font-weight: 500; color: var(--ink); }
.pdp-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.pdp-gallery { position: sticky; top: 90px; display: grid; grid-template-columns: 80px 1fr; gap: 14px; }
.pdp-main { grid-column: 2; grid-row: 1; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: var(--bg-2); }
.pdp-main img, .pdp-main video { width: 100%; height: 100%; object-fit: cover; animation: fadeIn .5s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } }
.pdp-thumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; }
.pdp-thumbs button { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; opacity: .55; outline: 1px solid transparent; outline-offset: 2px; transition: opacity .3s, outline-color .3s; }
.pdp-thumbs button.active, .pdp-thumbs button:hover { opacity: 1; outline-color: var(--ink); }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumbs .ico { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; color: #fff; filter: drop-shadow(0 1px 4px rgba(0,0,0,.6)); }
.pdp-info h1 { font-size: clamp(2.6rem, 5vw, 4rem); margin-bottom: 1rem; }
.pdp-info .eyebrow { color: var(--wood); }
.pdp-short { font-size: 1.1rem; color: var(--ink-soft); max-width: 46ch; }
.pdp-price { font-family: var(--serif); font-size: 1.7rem; margin: 1.6rem 0; padding: 1rem 0; border-block: 1px solid var(--line); }
.pdp-cta { display: flex; gap: .7rem; flex-wrap: wrap; }
.pdp-cta .btn { flex: 1 1 200px; }
.btn-zalo-solid { background: #0068ff; border-color: #0068ff; color: #fff; --zalo-text: #0068ff; }
.btn-zalo-solid:hover { background: #0052cc; border-color: #0052cc; }
.btn-ghost .ico { --zalo-text: var(--bg); }
.pdp-perks { list-style: none; margin: 1.6rem 0 2rem; font-size: .9rem; color: var(--ink-soft); display: grid; gap: .4rem; }
.pdp-acc { border-top: 1px solid var(--line); }
.pdp-acc summary { font-size: 1.3rem; padding: 1.2rem 0; }
.pdp-acc details > div, .pdp-acc details > p, .pdp-acc details > ol, .pdp-acc details > table { padding-bottom: 1.4rem; color: var(--ink-soft); }
.pdp-acc details > div p + p { margin-top: .8rem; }
.specs { width: 100%; border-collapse: collapse; font-size: .92rem; }
.specs th, .specs td { text-align: left; padding: .6rem 0; border-bottom: 1px dashed var(--line); vertical-align: top; }
.specs th { font-weight: 500; color: var(--ink); width: 40%; }
.pdp-steps { padding-left: 1.2rem; display: grid; gap: .4rem; }
.related { margin-top: clamp(80px, 10vw, 140px); }
.related .product { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .hero-media { height: 460px; order: -1; justify-content: center; }
  .hero-photo { width: 78%; }
  .hero-clip { left: 2%; width: 34%; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .craft-photos { grid-template-columns: 1fr 1fr 1fr; }
  .pdp-grid { grid-template-columns: 1fr; }
  .pdp-gallery { position: static; grid-template-columns: 1fr; }
  .pdp-main { grid-column: 1; }
  .pdp-thumbs { grid-row: 2; flex-direction: row; overflow-x: auto; }
  .pdp-thumbs button { flex: 0 0 64px; }
}
@media (max-width: 760px) {
  .hero-media { height: 420px; }
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 14px; }
  .grid-4 .product-info h3 { font-size: 1.2rem; }
  .grid-4 .short, .grid-4 .product-foot .link-arrow { display: none; }
  .craft-photos { grid-template-columns: 1fr; }
  .craft-photos figure { aspect-ratio: 4 / 3; }
  .reel-grid { grid-template-columns: repeat(3, 72%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .reel { scroll-snap-align: start; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .pdp { padding-top: 90px; }
}

/* ==========================================================
   V3 — MOBILE FIRST (điện thoại là kênh chính)
   ========================================================== */
html { -webkit-text-size-adjust: 100%; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.mbar, .swipe-dots, .pdp-dots, .menu-extra, .pdp-count { display: none; }

/* Hover chỉ trên máy có chuột — tránh "dính" hover khi chạm */
@media (hover: none) {
  .product:hover .media img.alt { opacity: 0; }
  .product:hover .media img, .g:hover img, .craft-photos figure:hover img { transform: none; }
  .btn:hover { transform: none; }
}

@media (max-width: 760px) {
  :root { --pad: 16px; }
  body { font-size: 15px; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  h1 { font-size: clamp(2.7rem, 12.5vw, 3.6rem); }
  h2 { font-size: clamp(2rem, 8.6vw, 2.6rem); }
  .section { padding-block: 64px; }
  .section-head { margin-bottom: 28px; gap: 1rem; }
  .section-head .lead { font-size: .95rem; }
  .section-head .btn { padding: .7rem 1.2rem; font-size: .72rem; }
  .eyebrow { font-size: .66rem; letter-spacing: .22em; margin-bottom: .8rem; }
  .leaf-shadow { width: 120vw; opacity: .09; animation: none; }

  /* Nav */
  .nav { padding: .8rem var(--pad); padding-top: calc(.8rem + env(safe-area-inset-top)); }
  .brand { font-size: 1.05rem; } .brand-mark { width: 28px; height: 28px; }
  .menu-toggle { width: 44px; height: 44px; }
  .menu-toggle span { left: 11px; right: 11px; }
  .nav-links { justify-content: flex-start; padding: 96px 28px 40px; gap: 1.2rem; font-size: 2rem; align-items: flex-start; overflow-y: auto; }
  .nav-links > a:not(.btn) { width: 100%; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
  .nav-links > a.btn { display: none; }
  .menu-extra { display: grid; gap: 1.2rem; width: 100%; margin-top: auto; padding-top: 1.5rem; }
  .menu-extra .btn { width: 100%; font-family: var(--sans); padding: 1rem; }
  .socials-ink a { border-color: var(--line); color: var(--ink); --zalo-text: var(--bg); width: 48px; height: 48px; }

  /* Ẩn nút chat nổi — thay bằng thanh đáy */
  .float-chat { display: none; }

  /* Thanh liên hệ dính đáy */
  .mbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: rgba(245, 243, 239, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line); padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    gap: 8px; align-items: stretch;
  }
  .mbar-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 50px; font-size: .68rem; color: var(--ink-soft); border-radius: 12px; --zalo-text: var(--surface); }
  .mbar-btn .ico { width: 22px; height: 22px; color: var(--ink); }
  .mbar-btn:active { background: var(--bg-2); }
  .mbar-zalo { background: #0068ff; color: #fff; --zalo-text: #0068ff; }
  .mbar-zalo .ico { color: #fff; }
  .mbar-price { display: flex; flex-direction: column; justify-content: center; padding: 0 6px; min-width: 0; flex: 0 1 auto; }
  .mbar-price small { font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); }
  .mbar-price b { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; white-space: nowrap; }
  .mbar-ico { width: 52px; flex: 0 0 52px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; }
  .mbar-ico .ico { width: 24px; height: 24px; }
  .mbar-main { flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; border-radius: 12px; background: #0068ff; color: #fff; font-weight: 500; font-size: .95rem; --zalo-text: #0068ff; }

  /* Dải vuốt ngang dùng chung */
  .story-grid, #gridIncense, .craft-photos, .reel-grid, #related {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%;
    gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scroll-padding-inline: var(--pad);
    scrollbar-width: none; background: none; border: 0;
  }
  .story-grid::-webkit-scrollbar, #gridIncense::-webkit-scrollbar, .craft-photos::-webkit-scrollbar, .reel-grid::-webkit-scrollbar, #related::-webkit-scrollbar { display: none; }
  .story-grid > *, #gridIncense > *, .craft-photos > *, .reel-grid > *, #related > * { scroll-snap-align: start; }
  .swipe-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
  .swipe-dots i, .pdp-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--line); transition: width .3s var(--ease), background .3s; }
  .swipe-dots i.on, .pdp-dots i.on { width: 20px; background: var(--ink); }
  .dark .swipe-dots i { background: rgba(236,231,223,.2); } .dark .swipe-dots i.on { background: var(--on-dark); }

  /* Hero */
  .hero { min-height: auto; padding: calc(76px + env(safe-area-inset-top)) var(--pad) 40px; gap: 28px; }
  .hero-media { height: auto; aspect-ratio: 4 / 4.4; justify-content: flex-end; }
  .hero-photo { width: 82%; border-radius: 160px 160px 6px 6px; }
  .hero-clip { width: 36%; left: 0; bottom: 4%; border-width: 4px; }
  .hero-caption { display: none; }
  .hero-sub { margin: 1.2rem 0 1.6rem; font-size: 1rem; }
  .hero-cta { gap: 1rem; }
  .hero-cta .btn { width: 100%; padding: 1.05rem; }
  .hero-cta .link-arrow { margin: 0 auto; }
  .marquee { padding: .8rem 0; } .marquee-track { font-size: 1.15rem; gap: 1.6rem; }

  /* Story */
  .story-head { margin-bottom: 28px; }
  .story-card { min-height: 0; padding: 28px 22px; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; justify-content: flex-start; }
  .story-card .glyph { position: static; display: block; font-size: 2.4rem; margin-bottom: 1rem; opacity: .35; }
  .story-card h3 { font-size: 1.4rem; }

  /* Products */
  .product-info { padding-top: .9rem; }
  .product-info h3 { font-size: 1.35rem; }
  .product .short { min-height: 0; font-size: .88rem; }
  .product-foot { margin-top: .7rem; padding-top: .7rem; }
  .price { font-size: 1.05rem; }
  .tag { top: 10px; left: 10px; font-size: .6rem; padding: .25rem .6rem; }
  .sub-head { margin-top: 56px; }
  .grid-4 { gap: 20px 12px; }
  .grid-4 .product-info h3 { font-size: 1.1rem; }
  .grid-4 .product-foot { border: 0; padding-top: 0; margin-top: .3rem; }
  .grid-4 .price { font-size: .9rem; color: var(--ink-soft); }
  .grid-4 .line { font-size: .58rem; letter-spacing: .14em; }
  .has-video { width: 30px; height: 30px; right: 10px; bottom: 10px; }

  /* Craft */
  .craft-photos { margin-bottom: 0; }
  .craft-photos figure { aspect-ratio: 4 / 5; border-radius: 8px; }
  .steps { grid-template-columns: 1fr; border: 0; margin-top: 40px; gap: 0; }
  .steps li { display: grid; grid-template-columns: 52px 1fr; column-gap: 8px; padding: 16px 0; border-top: 1px solid rgba(236,231,223,.12); }
  .steps li::before { display: none; }
  .steps .num { grid-row: span 2; font-size: 2rem; margin: 0; }
  .steps h3 { font-size: 1.2rem; margin-bottom: .2rem; }
  .steps p { font-size: .86rem; }
  .quote { margin-top: 48px; }
  .quote p { font-size: 1.35rem; }

  /* Reels */
  .reel-grid { grid-auto-columns: 62%; padding-bottom: 0; }
  .reel figcaption { font-size: 1.05rem; padding: 2.5rem 1rem .9rem; }

  /* Ritual */
  .ritual { gap: 28px; }
  .ritual-visual { aspect-ratio: 4 / 3.6; border-radius: 8px; }
  .ritual-list { margin: 1.2rem 0; }
  .ritual-list li { padding: .8rem 0; font-size: .92rem; }

  /* Gallery kiểu Instagram */
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 3px; margin-inline: calc(-1 * var(--pad)); }
  .gallery-grid .g { border-radius: 0; }
  .gallery-grid .g:nth-child(n+7) { display: none; }

  /* FAQ */
  summary { font-size: 1.15rem; padding: 1.1rem 0; min-height: 44px; align-items: center; }
  details p { font-size: .9rem; }

  /* Contact */
  .contact-actions { flex-direction: column; }
  .contact-actions .btn { width: 100%; padding: 1.05rem; }
  .socials-lg { margin-top: 1.8rem; gap: .8rem; }

  /* Footer */
  .footer { padding: 36px var(--pad) 28px; gap: 1.2rem; }
  .footer .socials a { width: 44px; height: 44px; }

  /* ---------- Trang chi tiết ---------- */
  .pdp { padding: calc(64px + env(safe-area-inset-top)) var(--pad) 24px; }
  .crumbs { font-size: .72rem; margin: .6rem 0 .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .crumbs span { margin: 0 .3rem; }
  .pdp-gallery { margin-inline: calc(-1 * var(--pad)); gap: 0; }
  .pdp-main { border-radius: 0; aspect-ratio: 4 / 4.6; position: relative; }
  .pdp-thumbs { display: none !important; }
  .pdp-dots { display: flex; justify-content: center; gap: 6px; padding: 12px 0 4px; }
  .pdp-count { display: block; position: absolute; right: 12px; bottom: 12px; background: rgba(23,22,21,.6); color: #fff; font-size: .72rem; padding: .25rem .6rem; border-radius: 99px; }
  .pdp-info { padding-top: 8px; }
  .pdp-info h1 { font-size: 2.4rem; margin-bottom: .6rem; }
  .pdp-short { font-size: .98rem; }
  .pdp-price { margin: 1.1rem 0; padding: .8rem 0; font-size: 1.4rem; }
  .pdp-cta { display: none; } /* đã có thanh đặt hàng dính đáy */
  .pdp-perks { margin: 0 0 1.4rem; font-size: .85rem; }
  .pdp-acc summary { font-size: 1.15rem; }
  .related { margin-top: 56px; }
  .related .section-head { margin-bottom: 20px; }
  #related { grid-auto-columns: 64%; }
  #related .short { display: none; }
}

/* Điện thoại nhỏ (iPhone SE, Android 360px) */
@media (max-width: 380px) {
  h1 { font-size: 2.55rem; }
  .mbar-btn span { font-size: .62rem; }
  .mbar-price { display: none; }
}
@media (max-width: 760px) {
  body.menu-open .mbar { display: none; }
  .nav-links { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
  .hero { gap: 20px; padding-bottom: 32px; }
  .hero-media { aspect-ratio: 4 / 3.3; }
  .hero-photo { width: 70%; border-radius: 140px 140px 6px 6px; }
  .hero-clip { width: 31%; }
  .hero .eyebrow { margin-bottom: .5rem; }
  .hero-sub { margin: .9rem 0 1.3rem; }
}

/* ==========================================================
   POPUP "CẦN TƯ VẤN?"
   ========================================================== */
.tb-lead { position: fixed; right: 20px; bottom: 92px; z-index: 65; pointer-events: none; }
.lead-teaser { position: relative; opacity: 0; transform: translateY(16px) scale(.96); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.tb-lead.show .lead-teaser { opacity: 1; transform: none; pointer-events: auto; }
.tb-lead.open .lead-teaser { opacity: 0; pointer-events: none; }
.lead-open { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--surface); padding: 8px 16px 8px 8px; border-radius: 999px; box-shadow: 0 14px 36px -12px rgba(0,0,0,.35); border: 1px solid var(--line); }
.lead-avatar { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; flex: none; }
.lead-avatar img { width: 24px; height: 24px; filter: invert(1); }
.lead-teaser .lead-avatar::after { content: ""; position: absolute; right: 1px; top: 1px; width: 11px; height: 11px; border-radius: 50%; background: #2fbf71; border: 2px solid var(--surface); }
.lead-bubble { display: flex; flex-direction: column; line-height: 1.3; }
.lead-bubble b { font-weight: 500; font-size: .92rem; }
.lead-bubble small { font-size: .75rem; color: var(--ink-soft); }
.tb-lead.show .lead-open { animation: nudge 5s ease-in-out 1s infinite; }
@keyframes nudge { 0%, 88%, 100% { transform: none; } 92% { transform: translateY(-4px); } 96% { transform: translateY(0); } }
.lead-x { position: absolute; top: -8px; left: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 15px; line-height: 1; display: grid; place-items: center; z-index: 2; }
.lead-x::before { content: ""; position: absolute; inset: -10px; } /* vùng chạm rộng hơn */

.lead-backdrop { position: fixed; inset: 0; background: rgba(18,17,16,.35); opacity: 0; transition: opacity .35s; }
.lead-panel {
  position: absolute; right: 0; bottom: 0; width: 360px; max-height: calc(100vh - 130px); overflow: auto;
  background: var(--surface); border-radius: 18px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(20px) scale(.98); transform-origin: bottom right; transition: opacity .35s var(--ease), transform .4s var(--ease);
}
.tb-lead.open .lead-panel, .tb-lead.open .lead-backdrop { opacity: 1; transform: none; pointer-events: auto; }
.lead-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.lead-head b { display: block; font-weight: 500; }
.lead-head small { font-size: .75rem; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.lead-head .dot { width: 7px; height: 7px; border-radius: 50%; background: #2fbf71; }
.lead-close { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; font-size: 24px; color: var(--ink-soft); }
.lead-close:hover { background: var(--bg-2); }
.lead-body { padding: 16px; display: grid; gap: 12px; }
.lead-intro { font-size: .9rem; color: var(--ink-soft); }
.lead-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lead-chips input { position: absolute; opacity: 0; pointer-events: none; }
.lead-chips span { display: inline-block; padding: .45rem .85rem; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; cursor: pointer; transition: all .2s; }
.lead-chips input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.lead-chips input:focus-visible + span { outline: 2px solid var(--wood); outline-offset: 2px; }
.lead-field { display: grid; gap: 4px; }
.lead-field span { font-size: .75rem; font-weight: 500; color: var(--ink-soft); }
.lead-field em { font-style: normal; font-weight: 300; }
.lead-field input, .lead-field textarea {
  font: inherit; font-size: 16px; /* 16px để iPhone không tự phóng to */
  width: 100%; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); resize: vertical;
}
.lead-field input:focus, .lead-field textarea:focus { outline: none; border-color: var(--wood); box-shadow: 0 0 0 3px rgba(122,74,44,.12); }
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead-err { color: #b3261e; font-size: .82rem; min-height: 0; }
.lead-err:empty { display: none; }
.lead-submit { width: 100%; padding: 1rem; }
.lead-submit:disabled { opacity: .6; }
.lead-note { font-size: .72rem; color: var(--ink-soft); text-align: center; }
.lead-done { text-align: center; display: grid; gap: 10px; padding: 12px 4px 4px; }
.lead-done > span { font-size: 2.2rem; }
.lead-done b { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; }
.lead-done p { font-size: .9rem; color: var(--ink-soft); }
.lead-done .btn { width: 100%; }

@media (max-width: 760px) {
  .tb-lead { right: 12px; left: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); display: flex; justify-content: flex-end; }
  .lead-bubble small { display: none; }
  .lead-open { padding: 6px 14px 6px 6px; }
  .lead-avatar { width: 38px; height: 38px; }
  /* Bottom sheet */
  .lead-panel { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 88vh; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); }
  .lead-panel::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 8px auto 0; }
  .lead-head { padding-top: 10px; }
  body.lead-active { overflow: hidden; }
  body.lead-active .mbar { display: none; }
  body.menu-open .tb-lead { display: none; }
}

/* ==========================================================
   V4 — QA fixes: chữ dễ đọc, vùng chạm, nhảy anchor không bị header che
   ========================================================== */
section[id], [id="order"] { scroll-margin-top: 84px; }
.tb-lead.hush .lead-teaser { opacity: 0 !important; pointer-events: none !important; transform: translateY(16px) scale(.96); }
@media (max-width: 760px) {
  section[id] { scroll-margin-top: 64px; }
  .brand { min-height: 44px; }
  .link-arrow { display: inline-block; padding: 10px 0 6px; }
  .hero-cta .link-arrow { padding: 12px 4px 6px; }
  .eyebrow { font-size: 11px; letter-spacing: .2em; }
  .product .line, .grid-4 .line { font-size: 11px; letter-spacing: .12em; }
  .tag { font-size: 11px; letter-spacing: .08em; }
  .mbar-btn span { font-size: 11px; }
  .mbar-price small { font-size: 11px; letter-spacing: .1em; }
  .lead-head small { font-size: 12px; }
  .crumbs { font-size: 12px; }
}
@media (max-width: 380px) { .mbar-btn span { font-size: 11px; } }

/* ---------- Tablet 761–960px: menu gọn, không để ô lẻ ---------- */
@media (min-width: 761px) and (max-width: 1100px) {
  .menu-toggle { display: block; z-index: 2; width: 44px; height: 44px; }
  .menu-toggle span { left: 11px; right: 11px; }
  .nav-links {
    position: fixed; inset: 0; background: var(--bg); flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 1.2rem; padding: 110px 48px 48px; font-family: var(--serif); font-size: 2.2rem;
    opacity: 0; pointer-events: none; transition: opacity .4s;
  }
  .nav-links.open { opacity: 1; pointer-events: auto; }
  .nav-links > a:not(.btn) { width: 100%; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
  .nav-links > a:not(.btn)::after { display: none; }
  .nav-links > a.btn { display: none; }
  .menu-extra { display: grid; gap: 1.2rem; width: 100%; max-width: 420px; margin-top: auto; }
  .menu-extra .btn { font-family: var(--sans); padding: 1rem; }
  .socials-ink a { border-color: var(--line); color: var(--ink); --zalo-text: var(--bg); width: 48px; height: 48px; }
  body.menu-open .tb-lead, body.menu-open .float-chat { display: none; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .story-grid, .product-grid:not(.grid-4) { grid-template-columns: repeat(3, 1fr); }
  .story-card { min-height: 260px; padding: 24px; }
  .story-card h3 { font-size: 1.35rem; }
  .story-card p, .product .short { font-size: .88rem; }
  .product-grid:not(.grid-4) .product-info h3 { font-size: 1.3rem; }
  .steps { grid-template-columns: 1fr; border: 0; gap: 0; max-width: 640px; }
  .steps li { display: grid; grid-template-columns: 64px 1fr; column-gap: 8px; padding: 18px 0; border-top: 1px solid rgba(236,231,223,.12); }
  .steps li::before { display: none; }
  .steps .num { grid-row: span 2; font-size: 2.2rem; margin: 0; }
  .steps h3 { margin-bottom: .2rem; }
  .hero-media { height: 480px; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .hero-caption { display: none; }
  .product-grid:not(.grid-4) .product-foot .link-arrow { display: none; }
}

/* ---------- Giữ đúng khung ảnh Instagram 4:5 (không cắt logo/nội dung) ---------- */
.g { aspect-ratio: 4 / 5; }
.g img { object-position: center top; }
@media (max-width: 760px) {
  .ritual-visual { aspect-ratio: 4 / 5; }
  .pdp-main { aspect-ratio: 4 / 5; }
}
/* Ảnh IG giữ phần trên (logo); ảnh bìa video 9:16 canh giữa-dưới để không cắt lửng chữ */
.media img, .craft-photos img, .ritual-visual img, .pdp-main img { object-position: center top; }
.media img[src*="-poster"], .pdp-main img[src*="-poster"] { object-position: center 75%; }

/* ---------- Lưới sản phẩm: 4 dòng trầm + 5 phụ kiện, không để ô lẻ ---------- */
@media (min-width: 961px) {
  #gridIncense { grid-template-columns: repeat(4, 1fr); }
  #gridHolder { grid-template-columns: repeat(5, 1fr); gap: 20px; }
  #gridHolder .product-info h3 { font-size: 1.2rem; }
  #gridHolder .short { font-size: .82rem; }
  #gridHolder .product-foot .link-arrow { display: none; }
}
@media (min-width: 961px) and (max-width: 1300px) {
  #gridHolder .short { display: none; }
  #gridIncense .product-foot .link-arrow { display: none; }
}
@media (min-width: 761px) and (max-width: 960px) {
  #gridIncense { grid-template-columns: repeat(2, 1fr); }
  #gridIncense .product-foot .link-arrow { display: inline-block; }
}
/* 2 cột (tablet + mobile): thẻ cuối lẻ trải hết hàng, ảnh ngang */
@media (max-width: 960px) {
  #gridHolder { grid-template-columns: repeat(2, 1fr); }
  #gridHolder.is-odd > .product:last-child { display: none; }
}

/* ==========================================================
   V5 — Mobile thật (iPhone): menu không bị cắt, chữ gọn hơn,
   nút trước/sau cho ảnh chi tiết
   ========================================================== */

/* Nút trước / sau ở ảnh chi tiết (mọi màn hình) */
.pdp-main { position: relative; }
.pdp-nav { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; pointer-events: none; }
.pdp-nav button {
  pointer-events: auto; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(245,243,239,.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center; box-shadow: 0 4px 14px -6px rgba(0,0,0,.35);
  transition: background .2s, transform .2s;
}
.pdp-nav button:hover { background: #fff; }
.pdp-nav button:active { transform: scale(.92); }
.pdp-nav svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pdp-main video ~ .pdp-nav { align-items: center; padding-bottom: 40px; } /* chừa thanh điều khiển video */
.pdp-dots button { width: 6px; height: 6px; padding: 0; border-radius: 99px; background: var(--line); transition: width .3s var(--ease), background .3s; position: relative; }
.pdp-dots button::before { content: ""; position: absolute; inset: -10px -4px; } /* vùng chạm rộng */
.pdp-dots button.on { width: 20px; background: var(--ink); }
@media (min-width: 961px) { .pdp-dots { display: none; } }

@media (max-width: 760px) {
  /* --- Menu: không bị cắt khi đã cuộn trang (backdrop-filter làm menu bị "nhốt" trong thanh nav) --- */
  body.menu-open .nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--bg); box-shadow: none; }
  .nav-links {
    height: 100vh; height: 100dvh; inset: 0 0 auto 0;
    padding: calc(72px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
    font-size: 1.45rem; gap: 0;
  }
  .nav-links > a:not(.btn) { padding: .85rem 0; }
  .menu-extra { gap: 1rem; padding-top: 1.25rem; }
  .menu-extra .btn { padding: .9rem; font-size: .78rem; }
  .socials-ink a { width: 44px; height: 44px; }

  /* --- Chữ gọn hơn --- */
  body { font-size: 14.5px; }
  h1 { font-size: clamp(2.3rem, 10.5vw, 2.9rem); }
  h2 { font-size: clamp(1.7rem, 7.2vw, 2.1rem); }
  h3 { font-size: 1.25rem; }
  .hero-sub, .lead, .pdp-short { font-size: .92rem; line-height: 1.6; }
  .hero-sub { margin: .7rem 0 1.1rem; }
  .hero-cta .btn, .contact-actions .btn { padding: .9rem; font-size: .76rem; }
  .eyebrow { letter-spacing: .16em; }
  .story-card h3 { font-size: 1.2rem; }
  .story-card p, .product .short, .steps p, .ritual-list li, details p { font-size: .86rem; }
  .product-info h3 { font-size: 1.18rem; }
  .grid-4 .product-info h3, #gridHolder .product-info h3 { font-size: 1.02rem; }
  .steps h3 { font-size: 1.08rem; }
  .steps .num { font-size: 1.7rem; }
  .quote p { font-size: 1.15rem; }
  summary { font-size: 1.02rem; }
  .marquee-track { font-size: 1rem; }
  .pdp-info h1 { font-size: 2rem; }
  .pdp-price { font-size: 1.2rem; }
  .pdp-acc summary { font-size: 1.02rem; }
  .mbar-main { font-size: .88rem; }
  .pdp-nav button { width: 38px; height: 38px; }
}

/* ==========================================================
   V6 — Review UX: dễ đọc hơn, gọn hơn, gộp Instagram
   ========================================================== */
:root { --ink-soft: #4a4541; --on-dark-soft: #b9b2a8; }
body { font-weight: 400; }
.hero-sub, .lead, .story-card p, .product .short, details p, .ritual-list li, .steps p, .pdp-short, #pDesc p { font-weight: 400; }

/* Khoảng cách giữa các phần: bớt trống trên desktop */
.section { padding-block: clamp(64px, 7.5vw, 112px); }
.section-head { margin-bottom: clamp(28px, 4vw, 52px); }

@media (min-width: 761px) {
  .eyebrow { font-size: .78rem; }
  .product .line { font-size: .74rem; }
  #gridIncense .short, #gridHolder .short { font-size: .92rem; line-height: 1.55; }
  .steps p { font-size: .95rem; }
  .note { font-size: .9rem; }
  .nav-links { font-size: .95rem; }
  .crumbs { font-size: .85rem; }
}

/* Instagram (gộp Moments): video + ảnh chung một lưới */
.g-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-cap {
  position: absolute; inset: auto 0 0 0; padding: 2.4rem .9rem .8rem; color: #fff;
  font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.25;
  background: linear-gradient(transparent, rgba(0,0,0,.55)); pointer-events: none;
}
.g-video::after { /* icon play nhỏ góc trên */
  content: ""; position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='%23171615'/%3E%3C/svg%3E") center/14px no-repeat;
}
@media (max-width: 760px) {
  .section { padding-block: 56px; }
  .g-cap { display: none; }
  .g-video::after { top: 6px; right: 6px; width: 18px; height: 18px; background-size: 12px; }
}

/* Zalo chưa có số: ẩn nút Zalo bên trong form tư vấn (vì đang ở form rồi) */
.no-zalo .tb-lead [data-link="zalo"] { display: none; }
/* chống ảnh tràn khung trên Safari */
.ritual > *, .pdp-grid > *, .story-grid > * { min-width: 0; }

/* Nút "Xem thêm" khi lưới đế bị lẻ (chỉ hiện ở 2 cột) */
.grid-more { text-align: center; margin-top: clamp(28px, 4vw, 48px); }

/* ==========================================================
   Trang danh sách sản phẩm (san-pham.html)
   ========================================================== */
.catalog { max-width: calc(var(--maxw) + 2 * var(--pad)); margin: 0 auto; padding: 110px var(--pad) clamp(64px, 7vw, 100px); }
.catalog-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin: .5rem 0 1.6rem; }
.catalog-head h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.catalog-head .lead { max-width: 52ch; }
.catalog-bar { position: sticky; top: 64px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .8rem 0; margin-bottom: clamp(20px, 3vw, 36px); background: var(--bg); border-bottom: 1px solid var(--line); }
.catalog-tabs { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; }
.catalog-tabs::-webkit-scrollbar { display: none; }
.catalog-tabs .chip { white-space: nowrap; background: none; }
.catalog-tabs .chip small { opacity: .6; margin-left: .3rem; }
.catalog-count { font-size: .85rem; color: var(--ink-soft); white-space: nowrap; }
#gridAll { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { #gridAll { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .catalog { padding: calc(64px + env(safe-area-inset-top)) var(--pad) 40px; }
  .catalog-head { margin: .2rem 0 .6rem; }
  .catalog-bar { top: calc(56px + env(safe-area-inset-top)); padding: .6rem 0; }
  .catalog-count { display: none; }
  #gridAll { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  #gridAll .short, #gridAll .product-foot .link-arrow { display: none; }
}
.catalog-empty { text-align: center; padding: 3rem 0; color: var(--ink-soft); }
.catalog-tabs .chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.catalog-tabs .chip.active small { opacity: .75; }
/* overflow hidden trên body làm hỏng sticky → dùng clip khi trình duyệt hỗ trợ */
@supports (overflow: clip) { body { overflow-x: clip; } }