:root{
  --paper:#faf8f4; --ink:#1a1a18; --ink-soft:#5a5a52; --line:#e2ddd3;
  --vermilion:#c8422e; --celadon:#5c8a7a; --maxw:1140px; --doc:760px;
}
@media(prefers-color-scheme:dark){
  :root{--paper:#14160f;--ink:#ece9e1;--ink-soft:#a8a49a;--line:#2d2f27}
}
*{box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth}
/* Chặn tràn ngang mà KHÔNG phá tính dính của thanh menu.
     overflow-x:hidden biến trang thành khung cuộn -> position:sticky mất tác dụng.
     overflow-x:clip chặn tràn mà không tạo khung cuộn. */
  @supports (overflow-x: clip){
    html{overflow-x:clip}
    body{overflow-x:clip}
  }
body{margin:0;background:var(--paper);color:var(--ink);overflow-x:hidden;
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:var(--vermilion);text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.doc{max-width:var(--doc);margin:0 auto}

/* ---- thanh trên ---- */
header.top{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(12px)}
header.top .wrap{display:flex;align-items:center;gap:14px;height:64px}
.brand{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.16rem;
  color:var(--ink);white-space:nowrap;letter-spacing:-.01em}
.brand b{color:var(--vermilion);font-weight:600}
.nav-links{display:flex;gap:17px;margin-left:auto}
.nav-links a{font-size:.88rem;color:var(--ink-soft);font-weight:500;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.btn-sm{padding:8px 15px;font-size:.86rem;margin-left:4px}

/* ---- chữ ---- */
h1{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.14;
  font-size:clamp(1.75rem,5vw,2.6rem);margin:.1em 0 .35em;letter-spacing:-.015em}
h2{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.22;
  font-size:clamp(1.3rem,3.4vw,1.85rem);margin:2em 0 .5em;scroll-margin-top:84px}
h3{font-size:1.08rem;font-weight:600;margin:1.7em 0 .35em}
p{margin:0 0 1.05em}
.sec{padding:52px 0}
.sec:first-child{padding-top:30px}
.eyebrow{display:block;font-size:.78rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--celadon);margin-bottom:10px}
.lead{font-size:1.12rem;color:var(--ink-soft);margin-bottom:1.5em}
.crumb{font-size:.8rem;color:var(--ink-soft);padding:20px 0 0}
.crumb a{color:var(--ink-soft)}
.crumb a:hover{color:var(--vermilion)}

/* ---- nút ---- */
.btn{display:inline-block;background:var(--vermilion);color:#fff;font-weight:600;
  padding:12px 22px;border-radius:9px;font-size:.95rem;margin:6px 8px 0 0;border:none;
  cursor:pointer;font-family:inherit;transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.cta-box{border:1px solid var(--line);border-radius:14px;padding:30px;
  background:color-mix(in srgb,var(--vermilion) 5%,transparent)}
.cta-box h2{margin-top:0}

/* ---- khối thông tin ---- */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:1.6em 0}
.box{border:1px solid var(--line);border-radius:12px;padding:22px}
.box h3{margin-top:0}
.box p:last-child{margin-bottom:0}
.steps{counter-reset:b;list-style:none;padding:0;margin:1.5em 0}
.steps li{counter-increment:b;position:relative;padding:0 0 20px 52px;margin:0}
.steps li::before{content:counter(b);position:absolute;left:0;top:-2px;width:34px;height:34px;
  border-radius:50%;background:var(--celadon);color:#fff;display:grid;place-items:center;
  font-weight:600;font-size:.92rem}
.steps b{display:block;margin-bottom:2px}
.faq details{border-bottom:1px solid var(--line);padding:15px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+ ";color:var(--vermilion);font-weight:700}
.faq details[open] summary::before{content:"— "}
.faq p{margin:.6em 0 0;color:var(--ink-soft)}
.anh-lon{border-radius:14px;overflow:hidden;border:1px solid var(--line);margin:1.6em 0}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin:1.6em 0}
.gal img{border-radius:10px;border:1px solid var(--line);width:100%;height:150px;object-fit:cover}

/* ---- chân trang ---- */
footer{border-top:1px solid var(--line);margin-top:40px;padding:34px 0 60px;
  font-size:.88rem;color:var(--ink-soft)}
.f-brand{font-size:1rem;color:var(--ink)}
.f-links{line-height:2}
.f-links a{color:var(--ink-soft)}
.f-links a:hover{color:var(--vermilion)}

/* ---- nút nổi ---- */
body{padding-bottom:84px}
.float{position:fixed;right:16px;bottom:80px;z-index:70;display:flex;flex-direction:column;gap:11px}
.fbtn{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.2);font-weight:700;font-size:.84rem}
.fbtn.maps{background:#2b7a4b}.fbtn.zalo{background:#0068FF;font-family:"Fraunces",serif}
.fbtn.phone{background:var(--vermilion)}
.fbtn svg{width:24px;height:24px}


/* ===== HIỆU ỨNG ĐỘNG =====
   Học từ thienthienfood.com (ảnh bồng bềnh), nhưng làm bằng transform
   thay vì left/top — transform chạy trên GPU, mượt hơn và không tốn pin.
   Toàn bộ tự tắt khi máy khách bật chế độ giảm chuyển động. */

/* hiện dần + trượt lên khi cuộn tới */






/* ảnh bồng bềnh như đang trôi trên mặt nước */
/* Hiện dần khi cuộn — làm bằng CSS thuần, KHÔNG cần JavaScript.
   Trình duyệt nào hỗ trợ animation-timeline thì có hiệu ứng;
   trình duyệt cũ bỏ qua và nội dung hiện bình thường.
   Không bao giờ có chuyện nội dung bị giấu vì JS không chạy. */
@keyframes len_nhe{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .hien-dan{
      animation:len_nhe linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 45%;
    }
  }
}
@keyframes boi_nhe{
  0%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
  100%{transform:translateY(0)}
}
.troi-nhe{animation:boi_nhe 6s ease-in-out infinite}
.troi-nhe:nth-of-type(even){animation-duration:7.5s;animation-delay:-2s}

/* gợn nước lan ra — hợp chủ đề Koi */
@keyframes gon_nuoc{
  0%{transform:scale(.6);opacity:.5}
  100%{transform:scale(1.9);opacity:0}
}

/* ảnh trong bài: phóng rất nhẹ khi rê chuột */
figure img,.gal img{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
figure:hover img,.gal img:hover{transform:scale(1.03)}

/* thẻ nổi lên khi rê chuột */
.box,.card,.g-muc,.b-o{transition:transform .35s ease,border-color .35s ease,
  box-shadow .35s ease}
.box:hover,.card:hover,.g-muc:hover,.b-o:hover{transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(0,0,0,.07)}

/* nút nhấn nhá nhẹ */
.btn{transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:active{transform:scale(.97)}

@media(prefers-reduced-motion:reduce){
  
  .troi-nhe{animation:none}
  figure img,.gal img,.box,.card,.g-muc,.b-o,.btn{transition:none}
  figure:hover img,.gal img:hover{transform:none}
  .box:hover,.card:hover,.g-muc:hover,.b-o:hover{transform:none;box-shadow:none}
}

/* Thu gọn thanh menu theo chiều rộng màn — tránh nút Zalo bị đẩy ra ngoài */
@media(max-width:1200px){ .nav-links{gap:14px} .nav-links a{font-size:.85rem} }
@media(max-width:1020px){ .nav-links{gap:11px} .nav-links a{font-size:.82rem}
  .brand{font-size:1.08rem} }
@media(max-width:860px){ .nav-links{display:none} .btn-sm{margin-left:auto} }
@media(max-width:520px){
  body{font-size:16px}
  header.top .wrap{height:58px;gap:10px}
  .brand{font-size:1rem}
  .sec{padding:38px 0}
  .float{right:12px;bottom:76px}
  .fbtn{width:48px;height:48px}
  .cta-box{padding:22px}
}