/* ==========================================================================
   HAMICHEE — MOTION
   Hiệu ứng chuyển động cho toàn site. Tách riêng khỏi style.css để dễ gỡ.
   Nạp SAU style.css và pages.css.

   Nguyên tắc:
   - Chè truyền thống: chuyển động ấm, chậm, mượt — không giật, không loè.
   - Mọi hiệu ứng đều tắt sạch khi máy bật "giảm chuyển động".
   - Không đổi layout, không đổi màu — chỉ thêm chuyển động.
   ========================================================================== */

:root{
  --ease-out-soft: cubic-bezier(.22,.61,.36,1);
  --ease-out-back: cubic-bezier(.34,1.32,.64,1);
  --dur-1: .45s;
  --dur-2: .7s;
  --dur-3: 1.1s;
}

/* ==========================================================================
   1. SCROLL REVEAL — khối hiện dần khi cuộn tới
   JS gắn [data-reveal], rồi thêm .is-in khi khối lọt vào màn hình.
   ========================================================================== */

[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity var(--dur-2) var(--ease-out-soft),
             transform var(--dur-2) var(--ease-out-soft);
  will-change:opacity,transform;
}
[data-reveal].is-in{
  opacity:1;
  transform:none;
}

/* Biến thể: trượt ngang (dùng cho khối ảnh cạnh chữ) */
[data-reveal="left"]{transform:translateX(-26px)}
[data-reveal="right"]{transform:translateX(26px)}
[data-reveal="left"].is-in,
[data-reveal="right"].is-in{transform:none}

/* Biến thể: phóng nhẹ (dùng cho ảnh lớn) */
[data-reveal="zoom"]{transform:scale(.965)}
[data-reveal="zoom"].is-in{transform:none}

/* Stagger — các con trong lưới hiện lần lượt, JS gắn --i */
[data-reveal][style*="--i"]{
  transition-delay:calc(var(--i) * 90ms);
}

/* Khối đã hiện xong thì bỏ will-change cho nhẹ máy */
[data-reveal].is-done{will-change:auto}

/* ==========================================================================
   2. HERO — vào trang là chạy luôn, không đợi cuộn
   ========================================================================== */

/* Hero KHÔNG mờ dần: đây là thứ khách quét mã QR nhìn thấy đầu tiên,
   mỗi phần trăm giây chờ ở đây là một phần khách bỏ đi. Chỉ giữ
   chuyển động trượt nhẹ, không giấu chữ. */
.hero .eyebrow,
.hero h1,
.hero .lead,
.hero .hero-actions{
  opacity:1;
  transform:translateY(18px);
  animation:heroUp var(--dur-2) var(--ease-out-soft) forwards;
}
.hero .eyebrow{animation-delay:.10s}
.hero h1{animation-delay:.22s}
.hero .lead{animation-delay:.36s}
.hero .hero-actions{animation-delay:.50s}

@keyframes heroUp{
  to{opacity:1;transform:none}
}

.hero-media{
  opacity:1;
  transform:scale(1.04);
  animation:heroMedia var(--dur-3) var(--ease-out-soft) .28s forwards;
}
@keyframes heroMedia{
  to{opacity:1;transform:none}
}

/* Chữ vàng trong h1 — quét sáng một lần sau khi tiêu đề đã hiện */
.hero h1 .hl{
  position:relative;
  background-image:linear-gradient(100deg,
      transparent 0%, transparent 38%,
      rgba(255,208,138,.55) 50%,
      transparent 62%, transparent 100%);
  background-size:220% 100%;
  background-repeat:no-repeat;
  background-position:220% 0;
  animation:hlSweep 1.5s var(--ease-out-soft) 1.05s;
}
@keyframes hlSweep{
  from{background-position:220% 0}
  to{background-position:-120% 0}
}

/* ==========================================================================
   3. SỐ ĐẾM DẦN
   JS đọc data-count-to rồi chạy số. CSS chỉ lo phần nhìn.
   ========================================================================== */

.count-up{
  font-variant-numeric:tabular-nums;
  display:inline-block;
}
.count-up.is-running{
  color:var(--gold-text);
}

/* ==========================================================================
   4. THẺ & ẢNH — hover
   ========================================================================== */

/* Thẻ lối vào ở trang chủ */
.loi-vao .lv{
  transition:transform var(--dur-1) var(--ease-out-soft),
             box-shadow var(--dur-1) var(--ease-out-soft);
}
.loi-vao .lv img{
  transition:transform var(--dur-3) var(--ease-out-soft);
}
.loi-vao .lv .lv-noi{
  transition:background var(--dur-1) var(--ease-out-soft);
}
@media (hover:hover){
  .loi-vao .lv:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-lg);
  }
  .loi-vao .lv:hover img{transform:scale(1.06)}
}
.loi-vao .lv:focus-visible{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
}

/* Thẻ nội dung chung: món chè, giá trị, bài viết, khối trong các trang con */
.card,
.mon,
.gt-item,
.post-card,
.bai-viet-item{
  transition:transform var(--dur-1) var(--ease-out-soft),
             box-shadow var(--dur-1) var(--ease-out-soft);
}
@media (hover:hover){
  .card:hover,
  .mon:hover,
  .gt-item:hover,
  .post-card:hover,
  .bai-viet-item:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-lg);
  }
}

/* Ảnh trong thẻ — bọc overflow rồi zoom */
.card img,
.mon img,
.post-card img{
  transition:transform var(--dur-3) var(--ease-out-soft);
}
@media (hover:hover){
  .card:hover img,
  .mon:hover img,
  .post-card:hover img{transform:scale(1.05)}
}

/* ==========================================================================
   5. NÚT — nhấn là có phản hồi
   ========================================================================== */

.btn{
  transition:transform .18s var(--ease-out-soft),
             box-shadow .18s var(--ease-out-soft),
             background-color .18s ease,
             border-color .18s ease,
             color .18s ease;
}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px)}
}
.btn:active{
  transform:translateY(1px) scale(.985);
}

/* Nút chính: quét sáng khi rê chuột */
.btn-primary{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn-primary::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(105deg,
      transparent 20%,
      rgba(255,255,255,.28) 50%,
      transparent 80%);
  transform:translateX(-120%);
  transition:transform .75s var(--ease-out-soft);
}
@media (hover:hover){
  .btn-primary:hover::after{transform:translateX(120%)}
}

/* ==========================================================================
   6. THANH ĐIỀU HƯỚNG — gạch chân chạy từ giữa ra
   ========================================================================== */

.nav a{
  position:relative;
}
.nav a::after{
  content:"";
  position:absolute;
  left:50%;
  right:50%;
  bottom:-3px;
  height:2px;
  border-radius:2px;
  background:var(--gold);
  transition:left .3s var(--ease-out-soft), right .3s var(--ease-out-soft);
}
@media (hover:hover){
  .nav a:hover::after{left:12%;right:12%}
}
.nav a:focus-visible::after{left:12%;right:12%}
.nav a[aria-current="page"]::after{left:12%;right:12%}

/* Header đổ bóng mượt khi cuộn */
.site-header{
  transition:box-shadow .35s var(--ease-out-soft),
             background-color .35s var(--ease-out-soft);
}

/* ==========================================================================
   7. TIÊU ĐỀ SECTION — gạch chân tự vẽ khi khối hiện ra
   ========================================================================== */

.section h2{
  position:relative;
}
.section h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-.42rem;
  height:3px;
  width:0;
  border-radius:3px;
  background:linear-gradient(90deg,var(--gold),var(--green-300));
  transition:width .9s var(--ease-out-soft) .18s;
}
.section[data-reveal].is-in h2::after,
.section h2[data-reveal].is-in::after{
  width:64px;
}
/* Section canh giữa thì gạch cũng canh giữa */
/* .sec-head là khối canh giữa thật trên web này. Trước đây bắt .center
   nhưng class đó không tồn tại ở đâu, nên gạch chân treo lệch sang trái. */
.section .sec-head h2::after,
.section .center h2::after,
.section h2.center::after{
  left:50%;
  transform:translateX(-50%);
}

/* ==========================================================================
   8. ẢNH TẢI XONG THÌ HIỆN LÊN (bớt giật khi ảnh về chậm)
   ========================================================================== */

/* Chỉ ẩn khi JS đã chạy (js-motion do motion.js gắn vào thẻ <html>).
   Không có dấu này — người tắt JS, trình đọc cũ, bot — thì ảnh hiện
   bình thường. Thiếu điều kiện này là mất sạch ảnh khi JS không chạy. */
.js-motion img[loading="lazy"]{
  transition:opacity .5s var(--ease-out-soft);
}
.js-motion img[loading="lazy"]:not(.is-loaded){
  opacity:.001;
}
.js-motion img[loading="lazy"].is-loaded{
  opacity:1;
}

/* ==========================================================================
   9. NÚT LÊN ĐẦU TRANG
   ========================================================================== */

/* Phải né cột nút gọi/Zalo/chỉ đường (.float-bar ở right:16px, rộng 52px).
   Nếu để cùng bên phải, nút này nằm DƯỚI nút Chỉ đường và khách bấm
   mũi tên lên thì lại mở Google Maps. */
.to-top{
  position:fixed;
  right:80px;
  bottom:18px;
  z-index:60;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  font-size:1.15rem;
  line-height:1;
  cursor:pointer;
  box-shadow:var(--shadow);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px) scale(.9);
  transition:opacity .3s var(--ease-out-soft),
             transform .3s var(--ease-out-back),
             visibility .3s;
}
.to-top.is-show{
  opacity:1;
  visibility:visible;
  transform:none;
}
@media (hover:hover){
  .to-top:hover{background:var(--green-700);transform:translateY(-3px)}
}
.to-top:active{transform:scale(.94)}
/* Đứng trên thanh đặt hàng ở mobile */
body.has-order-bar .to-top{bottom:92px}
@media (max-width:1100px){
  .to-top{right:78px;bottom:14px}
}

/* ==========================================================================
   10. TÔN TRỌNG NGƯỜI DÙNG TẮT CHUYỂN ĐỘNG
   Tắt sạch mọi thứ ở trên — nội dung vẫn hiện đầy đủ.
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  [data-reveal],
  [data-reveal].is-in{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
  .hero .eyebrow,
  .hero h1,
  .hero .lead,
  .hero .hero-actions,
  .hero-media{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
  }
  .hero h1 .hl{animation:none!important;background-image:none!important}
  .section h2::after{width:64px!important;transition:none!important}
  img[loading="lazy"]:not(.is-loaded){opacity:1!important}
  .btn-primary::after{display:none!important}
  .to-top{transition:none!important}
}

/* ==========================================================================
   ============  LỚP HIỆU ỨNG NÂNG CAO  ============
   Thêm 04/09/2026 theo yêu cầu "hiệu ứng hơn nữa".
   Vẫn giữ nguyên tắc: thà mất hiệu ứng còn hơn mất nội dung.
   ========================================================================== */

/* ==========================================================================
   11. THANH TIẾN TRÌNH ĐỌC — vạch vàng chạy ngang trên đỉnh trang
   ========================================================================== */

.read-bar{
  position:fixed;
  top:0; left:0;
  height:3px;
  width:100%;
  z-index:200;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--green),var(--gold));
  pointer-events:none;
  will-change:transform;
}

/* ==========================================================================
   12. HERO — ảnh phóng rất chậm (Ken Burns) + nền thở nhẹ
   ========================================================================== */

.hero-media img{
  animation:kenBurns 26s ease-in-out 1.4s infinite alternate;
  will-change:transform;
}
@keyframes kenBurns{
  from{transform:scale(1)}
  to{transform:scale(1.055)}
}

/* Hai vệt sáng trong nền hero trôi rất chậm cho đỡ tĩnh */
.hero-bg{
  animation:heroGlow 18s ease-in-out infinite alternate;
}
@keyframes heroGlow{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-1.6%,1.2%,0)}
}

/* ==========================================================================
   13. TIÊU ĐỀ HIỆN THEO TỪNG DÒNG — kiểu tạp chí
   JS bọc mỗi dòng vào .ln > .ln-i rồi trượt lên.
   ========================================================================== */

.ln{
  display:block;
  overflow:hidden;
}

/* QUAN TRỌNG — trạng thái mặc định của dòng chữ là HIỆN (transform:none).
   Chỉ ẩn khi JS chủ động gắn .ln-hide, và chính JS sẽ gỡ ra bằng setTimeout.

   KHÔNG dùng CSS animation ở đây: animation bị ĐÓNG BĂNG khi cửa sổ ẩn,
   chữ kẹt lại dưới đáy và bị .ln cắt mất — tiêu đề chính của trang biến mất.
   setTimeout thì vẫn chạy trong nền, nên chữ luôn về đúng chỗ. */
.ln-i{
  display:block;
  transform:none;
  transition:transform .85s var(--ease-out-soft);
}
.ln-i.ln-hide{
  transform:translateY(105%);
}

/* ==========================================================================
   14. BĂNG CHỮ CHẠY — dải cam vắt ngang trang
   ========================================================================== */

.marquee{
  --mq-dur:34s;
  position:relative;
  overflow:hidden;
  background:var(--green-900);
  border-block:1px solid rgba(255,208,138,.18);
  padding:.72rem 0;
  user-select:none;
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:mqRun var(--mq-dur) linear infinite;
  will-change:transform;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  padding-inline:1.1rem;
  font-family:"Baloo 2",sans-serif;
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--gold-on-dark);
  white-space:nowrap;
}
.marquee-track span::after{
  content:"•";
  color:rgba(255,208,138,.5);
  font-size:1.1rem;
}
@keyframes mqRun{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* ==========================================================================
   15. THẺ NGHIÊNG THEO CHUỘT + VÙNG SÁNG BÁM CON TRỎ
   ========================================================================== */

@media (hover:hover) and (pointer:fine){
  .tilt{
    transform-style:preserve-3d;
    transition:transform .35s var(--ease-out-soft), box-shadow .35s var(--ease-out-soft);
  }
  .tilt.is-tilting{
    transition:box-shadow .35s var(--ease-out-soft);
  }
  /* Vùng sáng nhạt bám theo con trỏ */
  .spot{position:relative}
  .spot::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    opacity:0;
    transition:opacity .35s ease;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
               rgba(255,208,138,.20), transparent 62%);
    z-index:1;
  }
  .spot:hover::before{opacity:1}
  /* Chữ phải nổi trên lớp sáng */
  .spot > *{position:relative;z-index:2}
}

/* ==========================================================================
   16. NÚT HÚT THEO CHUỘT + GỢN SÓNG KHI BẤM
   ========================================================================== */

.btn{position:relative;overflow:hidden}

.ripple{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  background:rgba(255,255,255,.45);
  pointer-events:none;
  animation:rippleGo .62s var(--ease-out-soft) forwards;
  z-index:0;
}
.btn-ghost .ripple{background:rgba(18,131,60,.20)}
@keyframes rippleGo{
  to{transform:scale(2.6);opacity:0}
}

/* ==========================================================================
   17. ẢNH LỘ DẦN SAU TẤM MÀN
   ========================================================================== */

/* KHÔNG dùng border-radius:inherit — .mask-img cùng độ ưu tiên với .lv
   nhưng nạp sau nên thắng, làm 4 ô lối vào ở trang chủ mất bo góc 18px. */
.mask-img{
  position:relative;
  overflow:hidden;
}
.mask-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--cream-2);
  transform:translateX(0);
  transition:transform 1s var(--ease-out-soft);
  z-index:2;
}
.mask-img.is-in::after{
  transform:translateX(101%);
}

/* ==========================================================================
   18. HEADER THU GỌN KHI CUỘN
   ========================================================================== */

.site-header.shrink .brand-logo{
  transform:scale(.86);
  transition:transform .35s var(--ease-out-soft);
}
.site-header .brand-logo{transition:transform .35s var(--ease-out-soft)}
.site-header.shrink .brand-text em{
  opacity:0;
  max-height:0;
  transition:opacity .3s ease, max-height .3s ease;
}
.site-header .brand-text em{
  transition:opacity .3s ease, max-height .3s ease;
  max-height:2em;
}

/* ==========================================================================
   19. TRÔI THEO CUỘN (parallax rất nhẹ)
   ========================================================================== */

.par{will-change:transform}

/* ==========================================================================
   20. DẢI SỐ LIỆU
   ========================================================================== */

.stat-band{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  padding:2.2rem 0 .4rem;
}
.stat-band .st{
  text-align:center;
  padding:1rem .6rem;
  border-radius:var(--radius-sm);
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.stat-band .st b{
  display:block;
  font-family:"Baloo 2",sans-serif;
  font-size:2.05rem;
  line-height:1;
  color:var(--green-700);
  margin-bottom:.2rem;
}
.stat-band .st span{
  font-size:.86rem;
  color:var(--ink-2);
  line-height:1.35;
  display:block;
}
@media (max-width:720px){
  .stat-band{grid-template-columns:repeat(2,1fr)}
  .stat-band .st b{font-size:1.75rem}
}

/* ==========================================================================
   21. TẮT SẠCH LỚP NÂNG CAO KHI NGƯỜI DÙNG GIẢM CHUYỂN ĐỘNG
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .read-bar{display:none!important}
  .hero-media img{animation:none!important}
  .hero-bg{animation:none!important}
  .marquee-track{animation:none!important;width:auto}
  .ln-i,
  .ln-i.ln-hide{transform:none!important;animation:none!important;transition:none!important}
  .mask-img::after{display:none!important}
  .ripple{display:none!important}
  .spot::before{display:none!important}
  .par{transform:none!important}
  .site-header.shrink .brand-text em{opacity:1!important;max-height:2em!important}
}

/* ==========================================================================
   22. DÂY BẢO HIỂM CHO HERO
   Hero vào trang bằng CSS animation (mượt, không nháy). Nhưng animation bị
   ĐÓNG BĂNG khi cửa sổ ẩn — hero có thể kẹt ở opacity 0.
   JS gắn .hero-safe sau 3 giây để ép hiện. Đặt cuối file để thắng cascade.
   ========================================================================== */

.hero-safe .hero .eyebrow,
.hero-safe .hero h1,
.hero-safe .hero .lead,
.hero-safe .hero .hero-actions,
.hero-safe .hero-media{
  opacity:1!important;
  transform:none!important;
  animation:none!important;
}
.hero-safe .ln-i{transform:none!important;transition:none!important;animation:none!important}
.hero-safe .hero-media img{animation:kenBurns 26s ease-in-out infinite alternate}