/* ═══════════════════════════════════════════════════════════
   TIỆM LEN HEO XINH — demo
   Màu lấy trực tiếp từ 6 ảnh thật của shop (xem assets/derived/palette-real.json)
   ═══════════════════════════════════════════════════════════ */

:root{
  --c-cream-50:#FBF6EF; --c-cream-100:#F5EADE; --c-cream-200:#E9DBC9; --c-cream-300:#D3C2A6;
  --c-brown-900:#4A3428; --c-brown-700:#6C5C3F; --c-brown-500:#8A7660;
  --c-green-700:#738F0D; --c-green-500:#99B123; --c-green-200:#D6E4A8;
  --c-pink:#E8A0B4; --c-purple:#B49BD8; --c-yellow:#E8C34A; --c-sun:#D6632A;

  --radius-sm:8px; --radius-md:16px; --radius-lg:24px; --radius-pill:999px;
  --shadow-soft:0 2px 8px rgba(74,52,40,.06), 0 8px 24px rgba(74,52,40,.07);
  --shadow-lift:0 4px 12px rgba(74,52,40,.09), 0 16px 40px rgba(74,52,40,.13);

  --dur-fast:180ms; --dur-base:320ms; --dur-slow:620ms; --dur-cine:1100ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);

  --wrap:1240px;
  --hdr-h:74px;

  --f-display:"Baloo 2","Quicksand","Segoe UI Variable Display",Georgia,serif;
  --f-body:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-hand:"Patrick Hand","Segoe Script","Comic Sans MS",cursive;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip}
/* Header fixed 74px: khong co dong nay thi bam anchor se bi header nuot mat tieu de */
[id]{scroll-margin-top:calc(var(--hdr-h) + 16px)}
body{
  margin:0; background:var(--c-cream-100); color:var(--c-brown-900);
  font-family:var(--f-body); font-size:16px; line-height:1.75;
  overflow-x:hidden;
  background-image:url(assets/brand/patterns/paper-grain.svg);
  background-size:220px;
}
img{max-width:100%; display:block}
h1,h2,h3,h4{font-family:var(--f-display); line-height:1.22; margin:0; letter-spacing:-.01em}
h2{font-size:clamp(28px,4.4vw,50px); font-weight:800}
h3{font-size:clamp(18px,2vw,22px); font-weight:700}
p{margin:0 0 1em}
a{color:inherit}
.wrap{
  max-width:var(--wrap); margin:0 auto;
  /* thu tu shorthand: tren PHAI duoi TRAI */
  padding:0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
}
.eyebrow{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-green-700); font-weight:700; margin:0 0 10px;
}
em{font-style:normal; color:var(--c-green-700)}

.skip{position:absolute; left:-9999px; top:0; background:#fff; padding:12px 20px; z-index:200; border-radius:0 0 12px 0}
.skip:focus{left:0}

/* ────────── NÚT ────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  background:var(--c-brown-900); color:var(--c-cream-50);
  border:2px solid var(--c-brown-900); border-radius:var(--radius-pill);
  padding:12px 24px; font:inherit; font-weight:700; font-size:15px;
  text-decoration:none; cursor:pointer; position:relative; overflow:hidden;
  transition:transform var(--dur-base) var(--ease-back),
             box-shadow var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease-out);
}
.btn svg{fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.btn:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift)}
.btn:active{transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--c-green-500); outline-offset:3px}
.btn--lg{padding:15px 30px; font-size:16px}
.btn--sm{padding:9px 17px; font-size:14px}
.btn--ghost{background:transparent; color:var(--c-brown-900)}
.btn--ghost:hover{background:var(--c-brown-900); color:var(--c-cream-50)}
.btn--light{background:var(--c-cream-50); color:var(--c-brown-900); border-color:var(--c-cream-50)}
.btn--onDark{color:var(--c-cream-50); border-color:var(--c-cream-50)}
.btn--onDark:hover{background:var(--c-cream-50); color:var(--c-brown-900)}

/* ────────── PRELOADER ────────── */
.preloader{
  position:fixed; inset:0; z-index:300; background:var(--c-cream-100);
  display:grid; place-content:center; justify-items:center; gap:16px;
  transition:opacity 620ms var(--ease-out), visibility 620ms;
}
.preloader.is-done{opacity:0; visibility:hidden}
/* Cua thoat hiem: du JS chet hay mang cham, preloader TU BIEN MAT sau 5 giay.
   Binh thuong app.js an no som hon nhieu nen animation nay khong bao gio thay. */
.preloader{animation:preThoat .5s ease 5s forwards}
@keyframes preThoat{to{opacity:0; visibility:hidden}}
.preloader__ball{animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.preloader__text{font-family:var(--f-hand); color:var(--c-brown-700); margin:0; font-size:15px}

/* ────────── HEADER ────────── */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             backdrop-filter var(--dur-base);
}
.hdr__in{
  max-width:var(--wrap); margin:0 auto; height:var(--hdr-h);
  padding:0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
  display:flex; align-items:center; gap:20px;
}
.hdr.is-stuck{background:rgba(245,234,222,.86); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--c-cream-200)}
.hdr__logo{flex:0 0 auto; line-height:0}
.hdr__logo img{width:160px; height:auto}
.hdr__nav{display:flex; gap:26px; margin-left:auto; font-size:15px; font-weight:600}
.hdr__nav a{
  text-decoration:none; position:relative; padding:6px 0; color:var(--c-brown-700);
  transition:color var(--dur-fast);
}
.hdr__nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:2px; height:2px;
  background:var(--c-green-700); border-radius:2px;
  transition:right var(--dur-base) var(--ease-out);
}
.hdr__nav a:hover,.hdr__nav a.is-active{color:var(--c-brown-900)}
.hdr__nav a:hover::after,.hdr__nav a.is-active::after{right:0}
.hdr__progress{height:2px; background:var(--c-green-500); width:0; transition:width 90ms linear}
/* 48px: chuan vung cham toi thieu — nut quan trong nhat tren mobile */
.burger{display:none; width:48px; height:48px; border:0; background:transparent; cursor:pointer; padding:13px; margin-left:auto}
.burger span{display:block; height:2px; background:var(--c-brown-900); border-radius:2px; margin:4px 0; transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-fast)}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ────────── DRAWER ────────── */
.drawer{
  position:fixed; inset:0; z-index:99; background:var(--c-cream-100);
  padding:calc(var(--hdr-h) + 24px) 24px calc(40px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; gap:28px;
  /* lop kem 78% de hoa tiet diu lai, khong tranh chu */
  background-image:linear-gradient(rgba(245,234,222,.78), rgba(245,234,222,.78)),
                   url(assets/brand/patterns/stitch-v.svg);
  /* man thap / xoay ngang: noi dung dai hon man hinh phai cuon duoc */
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.drawer[hidden]{display:none}
.drawer__nav{display:flex; flex-direction:column}
.drawer__nav a{
  display:flex; align-items:baseline; gap:14px; padding:16px 0;
  border-bottom:1px solid var(--c-cream-200); text-decoration:none;
  font-family:var(--f-display); font-size:24px; font-weight:700;
  opacity:0; transform:translateY(18px);
}
.drawer.is-open .drawer__nav a{animation:drawerIn 520ms var(--ease-out) forwards}
.drawer__nav a span{font-size:12px; color:var(--c-green-700); font-family:var(--f-body)}
@keyframes drawerIn{to{opacity:1; transform:none}}

/* ────────── HERO ────────── */
.hero{
  position:relative; min-height:100svh; max-height:960px;
  display:grid; align-items:center;
  padding:calc(var(--hdr-h) + 40px) 0 90px; overflow:hidden; isolation:isolate;
}

/* ẢNH NỀN CHÌM
   blur(3px) + scale(1.06) để không lộ mép mờ, brightness/saturate hạ xuống
   cho chữ nổi lên. Đây cũng là cách giấu việc ảnh gốc chỉ ~618px. */
.hero__bg{position:absolute; inset:-8% -2%; z-index:-2}
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  filter:blur(3px) saturate(.86) brightness(1.06);
  transform:scale(1.06);
}
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg,
      var(--c-cream-100) 0%,
      rgba(245,234,222,.94) 30%,
      rgba(245,234,222,.72) 52%,
      rgba(245,234,222,.46) 74%,
      rgba(245,234,222,.34) 100%),
    linear-gradient(to top, var(--c-cream-100) 1%, transparent 26%);
}
.hero__in{
  max-width:var(--wrap); margin:0 auto; width:100%;
  padding:0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
}
.hero__eyebrow{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--c-green-700); font-weight:700; margin:0 0 18px;
}
/* line-height 1.16 + dem padding: dau thanh tieng Viet (ỗ ũ ờ ú) cua Baloo 2
   vuot ra ngoai line box — de 1.08 + overflow:hidden la dau bi cat ngon */
.hero__title{font-size:clamp(40px,7.4vw,86px); font-weight:800; margin:0 0 22px; line-height:1.16}
.hero__title .l{display:block; overflow:hidden; padding-top:.14em; margin-top:-.14em}
.hero__title .l>i{display:block; font-style:normal}
.hero__sub{font-size:clamp(16px,1.6vw,19px); max-width:35ch; color:var(--c-brown-700); margin-bottom:30px}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:44px}
.hero__proof{display:flex; gap:38px; flex-wrap:wrap}
.hero__proof div{display:flex; flex-direction:column}
.hero__proof b{font-family:var(--f-display); font-size:34px; line-height:1; color:var(--c-brown-900)}
/* Chú ý: --c-brown-500 (#8A7660) trên nền kem chỉ đạt contrast 3.66 —
   chỉ dùng cho viền/trang trí, KHÔNG dùng cho chữ. Chữ nhỏ dùng brown-700 (5.46). */
.hero__proof span{font-size:13px; color:var(--c-brown-700)}

.scrollcue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  width:26px; height:42px; border:2px solid var(--c-brown-500); border-radius:14px;
  display:grid; place-items:start center; padding-top:7px; opacity:.65;
  transition:opacity var(--dur-base);
}
.scrollcue span{width:3px; height:8px; border-radius:2px; background:var(--c-brown-700); animation:cue 1.7s var(--ease-soft) infinite}
@keyframes cue{0%,100%{transform:translateY(0); opacity:1} 55%{transform:translateY(13px); opacity:.15}}
.hero.is-scrolled .scrollcue{opacity:0}

/* ────────── MARQUEE ────────── */
.marquee{background:var(--c-brown-900); color:var(--c-cream-100); padding:16px 0; overflow:hidden}
.marquee__track{display:flex; width:max-content; animation:slide 34s linear infinite}
/* chi pause khi co chuot that — tren touch, tap xong se "dinh" pause mai */
@media (hover:hover){ .marquee:hover .marquee__track{animation-play-state:paused} }
.marquee__set{display:flex; gap:52px; padding-right:52px; align-items:center}
.marquee__set span{display:inline-flex; align-items:center; gap:10px; white-space:nowrap; font-weight:600; font-size:15px}
.marquee__set svg{width:20px; height:20px; fill:none; stroke:var(--c-green-500); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
@keyframes slide{to{transform:translateX(-50%)}}

/* ────────── CÂU CHUYỆN ────────── */
.story{padding:clamp(70px,10vw,130px) 0}
.story__grid{display:grid; grid-template-columns:0.85fr 1fr; gap:clamp(32px,6vw,80px); align-items:center}
/* dung transform gop thay vi thuoc tinh rotate roi — WebView cu khong hieu rotate: */
.story__media{position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lift); transform:rotate(-1.6deg)}
.story__media img{width:100%; aspect-ratio:4/5; object-fit:cover}
.story__tape{
  position:absolute; top:-12px; left:50%; width:110px; height:30px;
  background:rgba(232,195,74,.5); border-radius:2px;
  transform:translateX(-50%) rotate(-4deg);
}
.story__text h2{margin-bottom:20px}
.story__text p{color:var(--c-brown-700); max-width:52ch}
.sign{font-family:var(--f-hand); font-size:24px; color:var(--c-green-700); margin-top:6px}

/* ────────── QUY TRÌNH ────────── */
/* height được JS tính lại theo quãng đường ngang thật; 420vh chỉ là giá trị đỡ khi JS chưa chạy */
.proc{height:420vh; position:relative; background:var(--c-cream-200)}
.proc__sticky{position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden}
.proc__head{padding-bottom:34px}
.proc__head h2{margin-bottom:18px}
.proc__bar{height:4px; background:var(--c-cream-300); border-radius:2px; max-width:280px; overflow:hidden}
.proc__bar i{display:block; height:100%; width:0; background:var(--c-green-700); border-radius:2px}
.proc__rail{display:flex; gap:26px; padding-left:max(24px,calc((100vw - var(--wrap))/2 + 24px)); will-change:transform}
.step{
  flex:0 0 340px; background:var(--c-cream-50); border-radius:var(--radius-lg);
  padding:30px 28px 26px; box-shadow:var(--shadow-soft); position:relative;
  border:1px solid rgba(211,194,166,.5);
}
.step__n{font-family:var(--f-display); font-size:52px; color:var(--c-cream-300); line-height:1; margin-bottom:6px}
.step__ic{width:34px; height:34px; fill:none; stroke:var(--c-green-700); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-bottom:12px}
.step h3{margin-bottom:10px}
.step p{color:var(--c-brown-700); font-size:15px; margin-bottom:14px}
.step b{
  display:inline-block; background:var(--c-green-200); color:var(--c-brown-900);
  padding:4px 12px; border-radius:var(--radius-pill); font-size:13px;
}

/* ────────── DÒNG SẢN PHẨM ────────── */
.cat{padding:clamp(70px,10vw,130px) 0}
.cat__h{margin-bottom:12px}
.cat__lead{color:var(--c-brown-700); max-width:46ch; margin-bottom:34px}
.tabs{display:flex; gap:6px; position:relative; flex-wrap:wrap; margin-bottom:34px}
.tabs button{
  border:0; background:transparent; font:inherit; font-weight:700; font-size:15px;
  padding:11px 20px; border-radius:var(--radius-pill); cursor:pointer;
  color:var(--c-brown-700); transition:color var(--dur-base) var(--ease-out);
  position:relative; z-index:1;
}
.tabs button[aria-selected=true]{color:var(--c-cream-50)}
.tabs button:focus-visible{outline:3px solid var(--c-green-500); outline-offset:2px}
/* KHONG dat height:100%: tren mobile tabs gay 2-3 hang, ink cao ca cum se thanh
   khoi nau khong lo de len chu. JS dat width+height+translate(x,y) theo dung nut. */
.tabs__ink{
  position:absolute; top:0; left:0; border-radius:var(--radius-pill);
  background:var(--c-brown-900); z-index:0;
  transition:transform var(--dur-slow) var(--ease-out),
             width var(--dur-slow) var(--ease-out),
             height var(--dur-slow) var(--ease-out);
}
.panels{position:relative}
.panel{display:none}
.panel.is-on{display:block}
.panel__lead{
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center;
  background:var(--c-cream-50); border-radius:var(--radius-lg); padding:22px 26px;
  margin-bottom:24px; border:1px solid rgba(211,194,166,.55);
}
.panel__lead svg{width:40px; height:40px; fill:none; stroke:var(--c-green-700); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.panel__lead p{margin:0; color:var(--c-brown-700)}
.panel__lead b{display:block; font-family:var(--f-display); font-size:19px; color:var(--c-brown-900)}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:22px}

.card{
  background:var(--c-cream-50); border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid rgba(211,194,166,.55); box-shadow:var(--shadow-soft);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  opacity:0; transform:translateY(22px);
}
.panel.is-on .card{animation:cardIn 620ms var(--ease-out) forwards}
@keyframes cardIn{to{opacity:1; transform:none}}
.card:hover{transform:translateY(-7px); box-shadow:var(--shadow-lift)}
/* Ảnh sản phẩm được tách ra từ tấm poster 960px nên chỉ rộng 194–343px thật.
   Kéo đầy khung 280px sẽ nhoè trên màn Retina. Thay vào đó đặt vật nhỏ giữa
   nền kem — trông có chủ ý, và không bao giờ phóng quá độ phân giải gốc.
   Khi có ảnh chụp mới ≥1200px thì đổi lại thành object-fit:cover. */
.card__img{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:var(--c-cream-100);
  display:grid; place-items:center; padding:14px;
}
.card__img::before{     /* hoạ tiết mờ, không được cạnh tranh với sản phẩm */
  content:""; position:absolute; inset:0; opacity:.38;
  background:url(assets/brand/patterns/stitch-v.svg);
}
.card__img img{position:relative}
.card__img img{
  width:auto; height:auto; max-width:min(100%,168px); max-height:100%;
  object-fit:contain; border-radius:var(--radius-sm);
  box-shadow:0 2px 10px rgba(74,52,40,.10);
  transition:transform var(--dur-cine) var(--ease-out);
}
.card:hover .card__img img{transform:scale(1.04) rotate(-1.2deg)}
.card__badge{
  position:absolute; top:12px; left:12px; background:var(--c-cream-50);
  padding:5px 12px; border-radius:var(--radius-pill); font-size:12px; font-weight:700;
  box-shadow:var(--shadow-soft);
}
.card__body{padding:16px 18px 20px}
.card__body h3{margin-bottom:5px; font-size:18px}
.card__body p{font-size:14px; color:var(--c-brown-700); margin-bottom:12px; min-height:42px}
.card__foot{display:flex; align-items:center; justify-content:space-between; gap:10px}
.price{font-family:var(--f-display); font-weight:800; font-size:18px}
.dots{display:flex; gap:5px}
.dots i{width:13px; height:13px; border-radius:50%; border:1.5px solid rgba(74,52,40,.18)}

/* ────────── THÔNG ĐIỆP ────────── */
.msg{padding:clamp(70px,10vw,130px) 0; background:var(--c-cream-200)}
.msg__grid{display:grid; grid-template-columns:1fr .9fr; gap:clamp(32px,6vw,74px); align-items:center}
.msg__text h2{margin-bottom:16px}
.msg__text>p{color:var(--c-brown-700); max-width:46ch}
.field{margin-bottom:18px; position:relative}
.field label{display:block; font-size:13px; font-weight:700; margin-bottom:7px; color:var(--c-brown-700)}
.field input,.field textarea{
  /* 16px la muc toi thieu: nho hon thi iOS tu zoom ca trang khi cham vao o nhap */
  width:100%; font:inherit; font-size:16px; padding:12px 15px; resize:vertical;
  border:2px solid var(--c-cream-300); border-radius:var(--radius-md);
  background:var(--c-cream-50); color:var(--c-brown-900);
  transition:border-color var(--dur-base), box-shadow var(--dur-base);
}
.field input:focus,.field textarea:focus{
  outline:0; border-color:var(--c-green-500); box-shadow:0 0 0 4px rgba(153,177,35,.16);
}
.field small{position:absolute; right:4px; top:0; font-size:12px; color:var(--c-brown-700)}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  border:2px solid var(--c-cream-300); background:var(--c-cream-50); font:inherit;
  font-size:14px; font-weight:600; padding:8px 16px; border-radius:var(--radius-pill); cursor:pointer;
  transition:all var(--dur-base) var(--ease-out);
}
.chip:hover{border-color:var(--c-green-500); transform:translateY(-2px)}
.chip.is-on{background:var(--c-brown-900); color:var(--c-cream-50); border-color:var(--c-brown-900)}
.msg__hint{font-size:13px; color:var(--c-green-700); margin:12px 0 0; min-height:20px; font-weight:600}

.msg__preview{display:grid; justify-items:center; gap:14px}
.tag{
  width:min(330px,86vw); background:var(--c-cream-50); border-radius:var(--radius-md);
  padding:34px 26px 28px; position:relative; box-shadow:var(--shadow-lift);
  border:1px solid rgba(211,194,166,.6); transform:rotate(1.4deg);
  transition:transform var(--dur-slow) var(--ease-out);
}
@media (hover:hover){ .tag:hover{transform:rotate(0deg)} }
.tag__hole{
  position:absolute; top:13px; left:50%; transform:translateX(-50%);
  width:15px; height:15px; border-radius:50%; background:var(--c-cream-200);
  box-shadow:inset 0 1px 3px rgba(74,52,40,.28);
}
.tag__card{text-align:center}
.tag__motif{font-size:52px; line-height:1; margin-bottom:14px; transition:transform var(--dur-slow) var(--ease-back)}
.tag__msg{font-family:var(--f-hand); font-size:17px; line-height:1.65; color:var(--c-brown-900); min-height:84px; margin-bottom:14px}
.tag__to{font-family:var(--f-hand); font-size:15px; color:var(--c-brown-700); margin:0; text-align:right}
.msg__cap{font-size:13px; color:var(--c-brown-700); margin:0}

/* ────────── DỊP TẶNG ────────── */
.occ{padding:clamp(70px,10vw,130px) 0}
.occ h2{margin-bottom:34px}
.occ__row{display:flex; gap:16px; overflow-x:auto; padding:4px 24px 20px; margin:0 -24px; scroll-snap-type:x mandatory}
.occ__row::-webkit-scrollbar{height:6px}
.occ__row::-webkit-scrollbar-thumb{background:var(--c-cream-300); border-radius:3px}
.occ__c{
  flex:0 0 210px; scroll-snap-align:start; border-radius:var(--radius-lg);
  padding:24px 22px; background:var(--c-cream-50); border:1px solid rgba(211,194,166,.55);
  transition:transform var(--dur-base) var(--ease-out), background var(--dur-base);
}
.occ__c:hover{transform:translateY(-6px)}
.occ__c b{display:block; font-family:var(--f-display); font-size:20px; margin-bottom:4px}
.occ__c span{font-size:13px; color:var(--c-brown-700)}
.occ__c i{display:block; font-size:30px; font-style:normal; margin-bottom:10px}

/* ────────── ĐẶT HÀNG ────────── */
.how{padding:clamp(70px,10vw,130px) 0; background:var(--c-cream-200)}
.how h2{margin-bottom:40px}
.how__list{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:s}
.how__list li{position:relative; padding-top:12px}
.how__list li::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  font-family:var(--f-display); font-size:13px; color:var(--c-green-700); font-weight:800;
}
.how__list li::after{
  content:""; position:absolute; top:46px; left:44px; right:-11px; height:2px;
  background:repeating-linear-gradient(90deg,var(--c-cream-300) 0 6px,transparent 6px 12px);
}
.how__list li:last-child::after{display:none}
.how__list svg{width:36px; height:36px; fill:none; stroke:var(--c-green-700); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; margin:8px 0 12px}
.how__list h3{margin-bottom:6px}
.how__list p{font-size:14px; color:var(--c-brown-700); margin:0}

/* ────────── FAQ ────────── */
.faq{padding:clamp(70px,10vw,130px) 0}
.faq__wrap{max-width:820px}
.faq h2{margin-bottom:30px}
.faq__item{border-bottom:1px solid var(--c-cream-300)}
.faq__q{
  width:100%; text-align:left; background:transparent; border:0; font:inherit;
  font-weight:700; font-size:clamp(16px,1.7vw,18px); padding:20px 44px 20px 0;
  cursor:pointer; position:relative; color:var(--c-brown-900); font-family:var(--f-display);
}
.faq__q::after{
  content:""; position:absolute; right:6px; top:50%; width:12px; height:12px;
  border-right:2.4px solid var(--c-green-700); border-bottom:2.4px solid var(--c-green-700);
  transform:translateY(-70%) rotate(45deg);
  transition:transform var(--dur-base) var(--ease-out);
}
.faq__item.is-open .faq__q::after{transform:translateY(-20%) rotate(-135deg)}
.faq__q:focus-visible{outline:3px solid var(--c-green-500); outline-offset:2px}
.faq__a{overflow:hidden; height:0; transition:height var(--dur-base) var(--ease-out)}
.faq__a p{padding:0 40px 22px 0; color:var(--c-brown-700); margin:0}

/* ────────── CTA CUỐI ────────── */
.final{
  padding:clamp(80px,11vw,150px) 0; background:var(--c-brown-900); color:var(--c-cream-100);
  text-align:center; position:relative; overflow:hidden;
}
.final::before{
  content:""; position:absolute; inset:0;
  background:url(assets/brand/patterns/stitch-single.svg); opacity:.22;
}
.final .wrap{position:relative}
.final h2{margin-bottom:14px}
.final p{color:var(--c-cream-200); margin-bottom:30px}
.final__cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ────────── FOOTER ────────── */
.ft{background:var(--c-cream-200); padding:60px 0 0}
.ft__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px; padding-bottom:44px}
.ft__grid img{margin-bottom:14px}
.ft__grid p{font-size:14px; color:var(--c-brown-700)}
.ft h4{font-size:14px; margin-bottom:14px; font-family:var(--f-body); font-weight:800}
.ft__grid a{display:block; font-size:14px; color:var(--c-brown-700); text-decoration:none; padding:5px 0; transition:color var(--dur-fast), transform var(--dur-fast)}
.ft__grid a:hover{color:var(--c-green-700); transform:translateX(3px)}
.ft__bar{
  border-top:1px solid var(--c-cream-300); padding:18px 24px; display:flex;
  justify-content:space-between; gap:14px; flex-wrap:wrap;
  max-width:var(--wrap); margin:0 auto; font-size:13px; color:var(--c-brown-700);
}
.ft__bar p{margin:0}
.ft__note{font-style:italic}

/* ────────── ICON LIÊN HỆ ────────── */
.xh__row{display:flex; flex-direction:column; gap:2px}
.xh{
  display:flex; align-items:center; gap:10px; padding:10px 8px 10px 0;
  text-decoration:none; font-size:14px; color:var(--c-brown-700);
  border-radius:var(--radius-sm);
  transition:color var(--dur-fast), transform var(--dur-fast);
}
.xh svg{width:26px; height:26px; flex:0 0 26px; border-radius:50%}
.xh:hover{color:var(--c-brown-900); transform:translateX(3px)}
.xh:focus-visible{outline:3px solid var(--c-green-500); outline-offset:2px}
.xh__trong{font-size:13px; color:var(--c-brown-700); font-style:italic; margin:0}

/* ảnh 404 đã được thay bằng hoạ tiết — làm mờ để không giả vờ là sản phẩm */
.anh-loi{opacity:.35; object-fit:contain !important; padding:20px}

/* ────────── TOAST NHỎ (báo "đã chép" — phải đi theo người dùng vì trang có thể
   cuộn đi ngay sau khi bấm, dòng hint tĩnh sẽ nằm lại phía trên không ai thấy) ── */
#miniToast{
  position:fixed; left:50%; z-index:210;
  bottom:calc(88px + env(safe-area-inset-bottom, 0px)); /* nam tren sticky CTA */
  transform:translateX(-50%) translateY(12px);
  background:var(--c-brown-900); color:var(--c-cream-50);
  max-width:calc(100vw - 32px); text-align:center;
  padding:11px 20px; border-radius:var(--radius-pill);
  font-size:14px; font-weight:600;
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-base), transform var(--dur-base) var(--ease-out);
}
#miniToast.on{opacity:1; transform:translateX(-50%) translateY(0)}

/* ────────── STICKY CTA + CON TRỎ ────────── */
.stickycta{
  position:fixed; left:16px; right:16px; z-index:90; display:none;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px)); /* ne home indicator iPhone */
  align-items:center; justify-content:center; gap:9px;
  background:var(--c-brown-900); color:var(--c-cream-50); text-decoration:none;
  padding:15px; border-radius:var(--radius-pill); font-weight:700;
  box-shadow:var(--shadow-lift); transform:translateY(140%);
  transition:transform var(--dur-slow) var(--ease-out);
}
.stickycta svg{fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.stickycta.is-on{transform:none}
/* an tam khi dang o vung da co nut CTA rieng (gui loi chuc / CTA cuoi / footer)
   — de khong xay ra canh hai nut nau chong len nhau */
.stickycta.is-an{transform:translateY(140%)}

.cursor{
  position:fixed; top:0; left:0; width:26px; height:26px; border-radius:50%;
  border:1.6px solid var(--c-green-700); pointer-events:none; z-index:200;
  translate:-50% -50%; transition:width var(--dur-base) var(--ease-out),
  height var(--dur-base) var(--ease-out), background var(--dur-base), opacity var(--dur-base);
  opacity:0;
}
.cursor.is-on{opacity:.85}
.cursor.is-big{width:52px; height:52px; background:rgba(153,177,35,.16)}

/* ────────── ANIMATION VÀO VIEW ────────── */
[data-anim]{opacity:0; will-change:transform,opacity}
[data-anim=up]{transform:translateY(28px)}
[data-anim=scale]{transform:scale(.94)}
[data-anim=mask]{transform:translateY(105%)}
[data-anim].in{opacity:1; transform:none; transition:opacity 720ms var(--ease-out), transform 720ms var(--ease-out)}

/* ────────── RESPONSIVE ────────── */
@media (max-width:1080px){
  .story__grid,.msg__grid{grid-template-columns:1fr}
  .how__list{grid-template-columns:repeat(2,1fr)}
  .how__list li:nth-child(2)::after{display:none}
  .ft__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .hdr__nav,.hdr__cta{display:none}
  .burger{display:block}
  .hero__proof{gap:24px}
  .hero__proof b{font-size:27px}
  .proc{height:340vh}
  .step{flex-basis:270px}
  .stickycta{display:flex}
  .cursor{display:none}
  .marquee__set{gap:32px; padding-right:32px}

  /* chu hero trai het be ngang -> lop phu phai deu, khong de ho ben phai nhu desktop */
  .hero__veil{
    background:
      linear-gradient(180deg,
        rgba(245,234,222,.96) 0%,
        rgba(245,234,222,.86) 34%,
        rgba(245,234,222,.72) 62%,
        rgba(245,234,222,.90) 88%,
        var(--c-cream-100) 100%);
  }

  /* chua padding day footer de sticky CTA khong de len dong © va link lien he */
  .ft__bar{padding-bottom:calc(18px + 72px + env(safe-area-inset-bottom, 0px))}
}
@media (max-width:560px){
  :root{--hdr-h:62px}          /* header 74px chiem ~12% man 360px — ha xuong */
  .hdr__logo img{width:132px}
  .how__list{grid-template-columns:1fr}
  .how__list li::after{display:none}
  .ft__grid{grid-template-columns:1fr}
  .hero{min-height:92svh}
  .tabs button{font-size:14px; padding:10px 15px}

  /* 3 so lieu nam gon 1 hang thay vi "100" roi xuong dong le loi */
  .hero__proof{display:grid; grid-template-columns:repeat(3, auto); gap:12px 20px}
  .hero__proof b{font-size:23px}
  .hero__proof span{font-size:11.5px}

  .faq__a p{padding-right:12px}   /* 40px padding phai qua phi tren man 360px */
}

/* ────────── THIET BI CAM UNG: bo hieu ung hover de khong bi "dinh" sau khi cham ────────── */
@media (hover:none){
  .btn:hover{transform:none; box-shadow:none}
  .card:hover{transform:none; box-shadow:var(--shadow-soft)}
  .card:hover .card__img img{transform:none}
  .chip:hover{transform:none; border-color:var(--c-cream-300)}
  .chip.is-on:hover{border-color:var(--c-brown-900)}
  .occ__c:hover{transform:none}
  .ft__grid a:hover{transform:none}
  .xh:hover{transform:none}
}

/* ────────── GIẢM CHUYỂN ĐỘNG ────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-anim]{opacity:1 !important; transform:none !important}
  .marquee__track{animation:none}
  .proc{height:auto}
  .proc__sticky{position:static; height:auto; padding:70px 0}
  .proc__rail{overflow-x:auto; transform:none !important; padding-bottom:20px}
  .cursor{display:none}
}