/* ============================================================
   THOMORE — Home "WOW" v2.1 (hero ken-burns + gleam + cursor/gyro tilt,
   product 3D tilt/glare, gentle float, 3D stand-up reveal, mobile 2-col,
   out-of-stock to end). Activated by body.t-wow2 (JS, gated). No-op otherwise.
   ============================================================ */
/* ============================================================
   THOMORE — Home "WOW" v2.1  (PREVIEW, mobile-first)
   Activated by body.t-wow2 (JS). Transform layers kept separate
   so they never collide:
     section  --hx/--hy (tilt)   --sc (parallax)
       .slider-wrapper  -> rotateX/rotateY  (cursor / gyro)
         .img-inner     -> translateY       (scroll parallax)
           img          -> scale            (ken-burns)
     .product-small.col -> 3D tilt (desktop) / pop-in reveal / :active
       .box-image       -> translateY       (gentle float)
         img            -> scale            (hover zoom)
   ============================================================ */

/* ---------- HERO ---------- */
.t-wow2 .t-hero{ position:relative; perspective:1300px; }

@keyframes t-kenburns{ 0%{transform:scale(1)} 100%{transform:scale(1.085)} }
.t-wow2 .t-hero .img-inner{ overflow:hidden; }
.t-wow2 .t-hero .img-inner img{
  animation:t-kenburns 16s ease-in-out infinite alternate;
  transform-origin:center center; will-change:transform;
}
.t-wow2 .t-hero .slider-wrapper{
  transform:rotateX(calc(var(--hy,0)*1deg)) rotateY(calc(var(--hx,0)*1deg));
  transform-style:preserve-3d; transition:transform .3s ease-out;
}
/* gleam sweep */
.t-wow2 .t-hero .t-shine{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.t-wow2 .t-hero .t-shine::before{
  content:""; position:absolute; top:-25%; left:-60%; width:38%; height:150%;
  background:linear-gradient(105deg, rgba(255,255,255,0) 30%,
            rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 70%);
  transform:rotate(8deg); animation:t-shine 7s ease-in-out 1.6s infinite;
}
@keyframes t-shine{ 0%{left:-60%} 16%{left:140%} 100%{left:140%} }

/* ---------- PRODUCT CARDS ---------- */
.t-wow2 .product-small.col{
  transform-style:preserve-3d;
  transition:transform .18s ease, box-shadow .25s ease;
}
.t-wow2 .product-small.col:hover{ box-shadow:0 22px 40px -18px rgba(30,12,14,.45); z-index:2; }
.t-wow2 .product-small.col:active{ transform:scale(.97); transition:transform .1s; } /* tap feedback */

/* aspect-ratio 1/1 (ảnh SP đều vuông 1000x1000): card KHÔNG sập height khi bị lọc lên trên fold
   (Flatsome chỉ set padding-top px cho ảnh đã xử lý; card dưới fold giữ padding-top:100% -> ra 0). */
.t-wow2 .product-small .box-image{ position:relative; overflow:hidden; border-radius:10px; aspect-ratio:1/1; padding-top:0 !important; }
.t-wow2 .product-small .box-image img{ object-fit:cover; }
/* gentle autonomous float (great on mobile where there's no hover) */
@keyframes t-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.t-wow2 .product-small .box-image.t-float{ animation:t-float 4.2s ease-in-out infinite; }
.t-wow2 .product-small .box-image img{ transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.t-wow2 .product-small.col:hover .box-image img{ transform:scale(1.07); }
/* glare follows cursor (desktop) */
.t-wow2 .product-small .box-image::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),
            rgba(255,255,255,.45), rgba(255,255,255,0) 42%);
  opacity:0; transition:opacity .3s; mix-blend-mode:screen;
}
.t-wow2 .product-small.col:hover .box-image::after{ opacity:1; }

/* ---------- REVEAL: "mực loang giấy dó" (#2) ---------- */
.t-wow2 .t-reveal{
  position:relative;
  opacity:0;
  transform:perspective(900px) translateY(26px) scale(.97);
  transform-origin:center bottom;
  filter:blur(4px);
  transition:opacity .55s ease, filter .55s ease, transform .65s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform,filter;
}
.t-wow2 .t-reveal.t-in{ opacity:1; transform:none; filter:none; }
/* #2 GIỌT MỰC: giọt rớt từ giữa chữ H2 xuống 1 BĂNG riêng (đã chừa chỗ -> KHÔNG
   đè text) rồi tóe ra. Chạy 1 LẦN khi cuộn tới rồi GIỮ NGUYÊN (không lặp, không tan). */
.t-wow2 .t-drip{ position:relative; width:100%; height:66px; margin:2px 0 4px; display:block; pointer-events:none; z-index:5; }
.t-wow2 .t-drop2{ position:absolute; top:0; left:var(--cx,50%); width:16px; height:21px; margin-left:-8px;
  background:var(--ink,#1E0C0E); border-radius:50% 50% 50% 50% / 58% 58% 42% 42%; opacity:0;
  transform:translateY(var(--fall,-42px)) scaleY(1.3);
  filter:drop-shadow(0 0 1.4px rgba(255,255,255,.5)); }
.t-wow2 .t-splat2{ position:absolute; top:-2px; left:var(--cx,50%); width:182px; height:98px; margin-left:-91px;
  background:var(--ink,#1E0C0E);
  -webkit-mask:var(--splat) center/contain no-repeat; mask:var(--splat) center/contain no-repeat;
  opacity:0; transform:scale(.14); transform-origin:50% 42%;
  transition:opacity .35s ease;   /* rời view -> mờ dần rồi mất */
  filter:drop-shadow(0 0 1.4px rgba(255,255,255,.5)) drop-shadow(0 1px 1px rgba(0,0,0,.14)); }
.t-wow2 .t-drip.t-go .t-drop2{ animation:t-fall2 .4s cubic-bezier(.5,0,.95,.4) forwards; }
.t-wow2 .t-drip.t-go .t-splat2{ animation:t-splat2 .55s .32s cubic-bezier(.18,1.5,.4,1) forwards; }
@keyframes t-fall2{ 0%{opacity:0;transform:translateY(var(--fall,-42px)) scaleY(1.3)} 25%{opacity:1} 78%{opacity:1;transform:translateY(2px) scaleY(1.05)} 100%{opacity:0;transform:translateY(8px) scaleY(.45)} }
@keyframes t-splat2{ 0%{opacity:0;transform:scale(.12)} 45%{opacity:1} 78%{transform:scale(1.06)} 100%{opacity:1;transform:scale(1)} }  /* giữ nguyên */

/* LAYOUT 2 (random): "phẩy mực" — nét cọ ngang quét trái->phải dưới H2. */
.t-wow2 .t-stroke2{ position:absolute; top:50%; left:var(--cx,50%); width:210px; height:32px; margin-left:-105px; margin-top:-16px;
  background:var(--ink,#1E0C0E);
  -webkit-mask:var(--stroke) center/contain no-repeat; mask:var(--stroke) center/contain no-repeat;
  opacity:0; clip-path:inset(0 100% 0 0); transition:opacity .35s ease;
  filter:drop-shadow(0 0 1.3px rgba(255,255,255,.5)) drop-shadow(0 1px 1px rgba(0,0,0,.14)); }
.t-wow2 .t-drip.s-splat  .t-stroke2{ display:none; }
.t-wow2 .t-drip.s-stroke .t-drop2,
.t-wow2 .t-drip.s-stroke .t-splat2{ display:none; }
.t-wow2 .t-drip.s-stroke.t-go .t-stroke2{ animation:t-stroke .75s ease forwards; }
@keyframes t-stroke{ 0%{opacity:1;clip-path:inset(0 100% 0 0)} 100%{opacity:1;clip-path:inset(0 0 0 0)} }

/* ---------- carry-overs ---------- */
.t-wow2 .row:not(.row-slider) > .product-small.col.outofstock{ order:50; }
.t-wow2 .product-small .out-of-stock-label{
  background:rgba(30,12,14,.74); color:#fff; border-radius:999px;
  padding:4px 13px; font-size:.72em; letter-spacing:.04em; box-shadow:0 4px 14px rgba(0,0,0,.18);
}
@media (max-width:549px){
  .t-wow2 .row.small-columns-1 > .product-small.col{
    flex:0 0 50% !important; max-width:50% !important; width:50%;
    padding-left:7px; padding-right:7px;
  }
}

/* Giảm chuyển động: dùng class html.t-reduce (JS gắn khi máy bật reduce VÀ không phải
   preview). Preview ?twow -> không gắn -> hiệu ứng vẫn chạy để xem được. */
html.t-reduce .t-wow2 .t-reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none}
html.t-reduce .t-wow2 .t-drop{display:none}
html.t-reduce .t-wow2 .t-hero .img-inner img,
html.t-reduce .t-wow2 .product-small .box-image.t-float{animation:none}
html.t-reduce .t-wow2 .product-small.col,html.t-reduce .t-wow2 .product-small .box-image img{transition:none}
html.t-reduce .t-wow2 .t-shine{display:none}

/* ---------- #1 SIGNATURE: câu văn + nốt hương theo chai ---------- */
.t-wow2 .product-small .box-image{ position:relative; }
.t-wow2 .t-litnote{ display:none; }
.t-wow2 .t-lit-ov{
  position:absolute; inset:0; z-index:7; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:14px 13px; text-align:center; color:#fff;
  background:linear-gradient(160deg, rgba(140,25,27,.95), rgba(30,12,14,.96));
  opacity:0; transition:opacity .45s ease; pointer-events:none; overflow:hidden;
}
.t-wow2 .product-small.col:hover .t-lit-ov,
.t-wow2 .product-small.t-lit-open .t-lit-ov{ opacity:1; }
/* overlay luôn pointer-events:none -> click vào ảnh vẫn vào trang sản phẩm.
   Desktop hover: clamp 2 dòng, canh giữa. Mobile tap (.t-lit-open): hiện full + auto-scroll (xem cuối khối). */
.t-wow2 .t-lit-in{ width:100%; margin:auto 0; }
.t-wow2 .t-lit-q{
  font-family:"traveling-typewriter", Georgia, serif;
  font-style:italic; font-size:.92rem; line-height:1.4; margin:0 0 5px;
}
.t-wow2 .t-lit-w{ font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; opacity:.8; margin:0 0 9px; }
.t-wow2 .t-lit-notes{ text-align:left; }
.t-wow2 .t-lit-s{ margin:0 0 6px; }
.t-wow2 .t-lit-s b{ display:block; color:#f6d68c; font-weight:700; font-size:.72rem; letter-spacing:.02em; }
.t-wow2 .t-lit-s span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:.62rem; line-height:1.3; opacity:.9; }
@media (max-width:549px){
  .t-wow2 .t-lit-q{ font-size:.8rem; }
  .t-wow2 .t-lit-s b{ font-size:.66rem; }
  .t-wow2 .t-lit-s span{ font-size:.58rem; -webkit-line-clamp:2; }
}
/* ---- Mobile/touch tap (.t-lit-open): hiện FULL mô tả + auto-scroll khi text dài hơn khung ---- */
.t-wow2 .product-small.t-lit-open .t-lit-ov{ justify-content:flex-start; }
.t-wow2 .product-small.t-lit-open .t-lit-in{ margin:0; will-change:transform; }
.t-wow2 .product-small.t-lit-open .t-lit-s span{ display:block; -webkit-line-clamp:none; overflow:visible; }
.t-wow2 .product-small.t-lit-open .t-lit-in.t-lit-roll{ animation:t-lit-roll var(--rdur,9s) ease-in-out infinite; }
/* cuộn: dừng ở đỉnh (đọc câu/quote) -> trôi lên lộ phần dưới -> dừng -> về lại default -> lặp */
@keyframes t-lit-roll{
  0%,12%   { transform:translateY(0); }
  44%,56%  { transform:translateY(var(--roll,0)); }
  88%,100% { transform:translateY(0); }
}

/* ---------- #4 PREMIUM: nảy icon giỏ khi ảnh bay tới ---------- */
@keyframes t-cart-pop{ 0%{transform:scale(1)} 35%{transform:scale(1.35)} 70%{transform:scale(.9)} 100%{transform:scale(1)} }
.t-cart-pop{ animation:t-cart-pop .5s ease; }

html.t-reduce .t-wow2 .t-lit-ov{ transition:none; }
html.t-reduce .t-fly{ display:none !important; }

/* ---------- #3 SIGNATURE: DIỄU HÀNH Kim Hoàng — lần lượt từng nhân vật tự vẽ
   nét→màu, hiện tên tác phẩm, giữ, rồi xoá, sang nhân vật kế; xoay vòng. ---------- */
.t-wow2 .t-kh-stage{ position:relative; width:100%; min-height:54vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; }
.t-wow2 .t-kh-slot{ flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; width:100%; }
.t-wow2 .t-kh-slot svg{ width:auto; max-width:100%; height:auto; max-height:50vh; }
.t-wow2 .t-kh-name{ font-family:"traveling-typewriter",Georgia,serif; font-style:italic; color:#8C191B;
  font-size:1.25rem; letter-spacing:.02em; margin-top:10px; opacity:0; transform:translateY(6px);
  transition:opacity .55s ease, transform .55s ease; }
.t-wow2 .t-kh-name.show{ opacity:1; transform:none; }
/* nét vẽ: transition 2 chiều, lệch pha qua --d. JS thêm .drawn để vẽ, bỏ để xoá. */
.t-wow2 .t-kh-art path{
  fill-opacity:0;
  stroke:#5e1012; stroke-width:0.8; stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition: stroke-dashoffset .9s ease, fill-opacity .6s ease;
  transition-delay: var(--d,0s), calc(var(--d,0s) + .4s);
}
.t-wow2 .t-kh-art.drawn path{ stroke-dashoffset:0; fill-opacity:1; }
html.t-reduce .t-wow2 .t-kh-art path{ fill-opacity:1 !important; stroke:none !important; stroke-dashoffset:0 !important; transition:none !important; }

/* ============================================================
   BATCH 2 — Shop grid: intro band + badge tem/triện + thanh lọc chủ đề
   ============================================================ */
/* Intro band */
.t-wow2 .t-shop-intro{ text-align:center; margin:2px 0 20px; padding:6px 16px 14px; }
.t-wow2 .t-shop-intro-t{ font-family:"traveling-typewriter",Georgia,serif; color:#8C191B; font-size:1.85rem; line-height:1.15; margin:0 0 7px; }
.t-wow2 .t-shop-intro-s{ color:#7a5142; font-size:.95rem; font-style:italic; margin:0 auto; max-width:640px; opacity:.92; }
@media (max-width:549px){ .t-wow2 .t-shop-intro-t{ font-size:1.3rem; } .t-wow2 .t-shop-intro-s{ font-size:.82rem; } }

/* Badge tem/triện */
.t-wow2 .t-badge{ display:inline-block; font-weight:800; font-size:.6rem; letter-spacing:.05em; line-height:1;
  text-transform:uppercase; padding:5px 9px; border-radius:5px; }
.t-wow2 .t-badge-sale{ background:#8C191B; color:#fff; box-shadow:0 3px 9px rgba(140,25,27,.35); }
/* ===== Thanh lọc theo CẢM XÚC — "Bảng cảm xúc" khung kem, chip kiểu chữ máy + con dấu vàng ===== */
.t-wow2 .t-filter{ margin:6px 0 28px; text-align:center; padding:24px 22px 22px;
  background:linear-gradient(180deg,#fbf2e6,#fdf8f1); border:1px solid #ecdcc8; border-radius:18px;
  box-shadow:0 14px 34px -20px rgba(140,25,27,.3); }
.t-wow2 .t-filter-h{ font-family:"traveling-typewriter",Georgia,serif; color:#8C191B; font-size:1.12rem; letter-spacing:.02em; margin:0 0 16px; }
.t-wow2 .t-filter-h::before, .t-wow2 .t-filter-h::after{ content:""; display:inline-block; width:26px; height:1px; background:#d8a94e; vertical-align:middle; margin:0 12px; opacity:.8; }
.t-wow2 .t-filter-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.t-wow2 .t-chip{ position:relative; display:inline-flex; align-items:center; gap:7px; border:1px solid #e3cdb9; background:#fff; color:var(--mood,#6a3f3f);
  font-family:"traveling-typewriter",Georgia,serif; font-size:.86rem; letter-spacing:.01em;
  padding:8px 17px 8px 14px; border-radius:999px; cursor:pointer;
  transition:transform .18s ease, background .2s, color .2s, border-color .2s, box-shadow .2s; }
.t-wow2 .t-chip-i{ width:17px; height:17px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease; }
.t-wow2 .t-chip:hover{ transform:translateY(-2px); border-color:var(--mood,#8C191B); box-shadow:0 8px 18px -10px var(--mood,rgba(140,25,27,.45)); }
.t-wow2 .t-chip:hover .t-chip-i{ transform:scale(1.12) rotate(-5deg); }
.t-wow2 .t-chip.is-on{ background:var(--mood,#8C191B); color:#fff7ef; border-color:var(--mood,#8C191B); transform:translateY(-1px) scale(1.05); box-shadow:0 10px 22px -10px var(--mood,rgba(140,25,27,.55)); text-shadow:0 1px 2px rgba(0,0,0,.18); }
.t-wow2 .t-chip.is-on .t-chip-i{ transform:scale(1.1); filter:drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.t-wow2 .product-small.t-hide{ display:none !important; }
.t-wow2 .t-filter-count{ margin-top:15px; font-family:"traveling-typewriter",Georgia,serif; font-style:italic; color:#9a6a4a; font-size:.86rem; }
/* ===== Bộ lọc cảm xúc dạng "dấu mực" (icon-only, gọn — hiện hết cùng lúc, ~2 hàng) ===== */
.t-wow2 .t-filter-stamp .t-filter-chips{ gap:13px; max-width:470px; margin:0 auto; }
.t-wow2 .t-filter-stamp .t-chip{ width:50px; height:50px; margin:0; padding:0; gap:0; border-radius:15px; justify-content:center; box-shadow:0 4px 12px -7px rgba(90,40,20,.4); overflow:visible; }
.t-wow2 .t-filter-stamp .t-chip .t-chip-i{ width:23px; height:23px; stroke-width:1.7; }
.t-wow2 .t-filter-stamp .t-chip:hover{ transform:translateY(-3px); box-shadow:0 10px 20px -10px var(--mood,rgba(140,25,27,.5)); }
.t-wow2 .t-filter-stamp .t-chip:active{ transform:scale(.93); }
.t-wow2 .t-filter-stamp .t-chip.is-on{ background:var(--mood,#8C191B); border-color:var(--mood,#8C191B); box-shadow:0 12px 24px -10px var(--mood,rgba(140,25,27,.6)); transform:translateY(-2px) scale(1.07); }
/* "đóng dấu": vòng mực lan ra rồi tan */
.t-wow2 .t-ink-ring{ position:absolute; left:50%; top:50%; width:50px; height:50px; margin:-25px 0 0 -25px; border-radius:50%; pointer-events:none; opacity:0; transform:scale(.3);
  background:radial-gradient(circle, var(--mood,#8C191B) 0%, var(--mood,#8C191B) 38%, transparent 70%); }
.t-wow2 .t-ink-ring.go{ animation:t-ink .55s ease-out forwards; }
@keyframes t-ink{ 0%{ opacity:.42; transform:scale(.3); } 100%{ opacity:0; transform:scale(2.7); } }
/* caption: tên cảm xúc "bay lên + nét rõ dần" rồi đứng lại (giữ tên để biết đang lọc gì) */
.t-wow2 .t-filter-cap{ min-height:48px; margin-top:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.t-wow2 .t-cap-name{ font-family:"traveling-typewriter",Georgia,serif; font-size:1.32rem; line-height:1.1; letter-spacing:.01em; color:inherit; }
.t-wow2 .t-cap-sub{ font-family:"traveling-typewriter",Georgia,serif; font-style:italic; font-size:.82rem; color:#9a6a4a; }
.t-wow2 .t-cap-hint{ font-family:"traveling-typewriter",Georgia,serif; font-style:italic; font-size:.86rem; color:#b08968; }
.t-wow2 .t-cap-in .t-cap-name{ animation:t-caprise .5s cubic-bezier(.2,.7,.2,1) both; }
.t-wow2 .t-cap-in .t-cap-sub, .t-wow2 .t-cap-in .t-cap-hint{ animation:t-capfade .6s ease both; }
@keyframes t-caprise{ 0%{ opacity:0; transform:translateY(15px); filter:blur(5px); letter-spacing:.14em; } 100%{ opacity:1; transform:none; filter:blur(0); letter-spacing:.01em; } }
@keyframes t-capfade{ 0%,55%{ opacity:0; } 100%{ opacity:1; } }
@media (max-width:549px){
  .t-wow2 .t-filter{ padding:18px 14px 16px; border-radius:14px; }
  .t-wow2 .t-filter-h{ font-size:.98rem; }
  .t-wow2 .t-filter-h::before, .t-wow2 .t-filter-h::after{ width:16px; margin:0 8px; }
  .t-wow2 .t-chip{ font-size:.82rem; padding:7px 14px 7px 11px; gap:6px; }
  .t-wow2 .t-chip-i{ width:16px; height:16px; }
  .t-wow2 .t-filter-stamp .t-filter-chips{ gap:9px; max-width:340px; }
  .t-wow2 .t-filter-stamp .t-chip{ width:46px; height:46px; border-radius:13px; padding:0; }
  .t-wow2 .t-filter-stamp .t-chip .t-chip-i{ width:21px; height:21px; }
  .t-wow2 .t-ink-ring{ width:46px; height:46px; margin:-23px 0 0 -23px; }
  .t-wow2 .t-cap-name{ font-size:1.16rem; }
}

/* ============================================================
   BATCH 3 — PDP emotion-first: câu trích mở màn + cảm xúc + Kim Hoàng
   ============================================================ */
.t-wow2 .t-pdp-lit{ margin:0 0 16px; text-align:center; }
.t-wow2 .t-pdp-quote{ font-family:"traveling-typewriter",Georgia,serif; font-style:italic; color:#8C191B; font-size:1.18rem; line-height:1.5; margin:0 0 7px; }
.t-wow2 .t-pdp-work{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#7a5142; margin:0 0 10px; }
.t-wow2 .t-pdp-moods{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; }
.t-wow2 .t-pdp-mood{ font-size:.74rem; padding:5px 13px; border-radius:999px; background:#f6ece0; color:#8C191B; border:1px solid #e6d3c0; }
@media (max-width:549px){ .t-wow2 .t-pdp-quote{ font-size:1.05rem; } }
/* Dải Kim Hoàng trên PDP (tái dùng .t-kh-art để tự vẽ nét) */
.t-wow2 .t-kh-pdp-wrap{ text-align:center; margin:6px 0 32px; }
.t-wow2 .t-kh-pdp-label{ font-family:"traveling-typewriter",Georgia,serif; color:#8C191B; font-size:1.02rem; letter-spacing:.04em; margin:0 0 12px; opacity:.92; }
.t-wow2 .t-kh-pdp{ display:flex; align-items:center; justify-content:center; min-height:180px; }
.t-wow2 .t-kh-pdp svg{ width:auto; max-width:88%; height:auto; max-height:44vh; }