html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Be Vietnam Pro', Arial, sans-serif; color: #211F1C; background: #FAF8F4; -webkit-font-smoothing: antialiased; }
a { color: #9A610B; text-decoration: none; }
a:hover { color: #B9760F; }
* { box-sizing: border-box; }
input, select, button { font-family: inherit; }
img { max-width: 100%; }

/* ---- header v13 dùng chung: nav ngang ẩn dưới 1080px, hiện nút ☰ ---- */
@media (max-width: 1080px) { .v-nav { display: none !important; } .v-burger { display: flex !important; } }

/* ---- logo: bản sáng mặc định; trang có chế độ tối (công cụ, trang gói) đổi sang bản tối theo máy ---- */
.lg-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  .dual-logo .lg-light { display: none !important; }
  .dual-logo .lg-dark { display: block !important; }
}

/* ---- shared: mobile slide-out sheet menu (all pages) ---- */
.site-sheet { position: fixed; inset: 0; z-index: 90; display: none; justify-content: flex-end; }
.site-sheet.open { display: flex; }
.site-sheet-backdrop { position: absolute; inset: 0; background: rgba(33,31,28,0.55); }
.site-sheet-panel { position: relative; width: min(400px, 100%); height: 100%; background: #FAF8F4; display: flex; flex-direction: column; animation: mSheet 0.22s ease-out; }
body.sheet-open { overflow: hidden; }
@keyframes mSheet { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }

/* ---- scroll-reveal (progressive enhancement — gated on html.js so
   content stays visible with JS off/failed) ---- */
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(.16,.84,.44,1), transform 0.7s cubic-bezier(.16,.84,.44,1); }
html.js .reveal.in { opacity: 1; transform: translateY(0); }
html.js .reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(.16,.84,.44,1), transform 0.6s cubic-bezier(.16,.84,.44,1); }
html.js .reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
html.js .reveal-stagger.in > *:nth-child(1) { transition-delay: 0s; }
html.js .reveal-stagger.in > *:nth-child(2) { transition-delay: .09s; }
html.js .reveal-stagger.in > *:nth-child(3) { transition-delay: .18s; }
html.js .reveal-stagger.in > *:nth-child(4) { transition-delay: .27s; }

/* ---- hover-lift for content cards ---- */
.m-hover-card { transition: transform 0.28s cubic-bezier(.16,.84,.44,1), box-shadow 0.28s ease, border-color 0.28s ease; will-change: transform; }

/* ---- CTA shine sweep on hover ---- */
.m-shine { position: relative; overflow: hidden; }
.m-shine::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%); transform: skewX(-18deg); transition: left 0.65s ease; pointer-events: none; }

/* Hover-only effects are gated to real pointer devices: on touch a tap can
   trigger :hover and it never clears (no mouseleave), cards would stay "lifted". */
@media (hover: hover) and (pointer: fine) {
  .m-hover-card:hover { transform: translateY(-7px); box-shadow: 0 22px 42px rgba(33,31,28,0.14); }
  .m-shine:hover::after { left: 130%; }
}

/* ---- nút/thẻ CTA dạng flex: chữ xuống dòng ở điện thoại vẫn căn giữa ---- */
a[style*="justify-content: center"] { text-align: center; }

/* ---- bảng dài trong công cụ cuộn ngang trong khung, không tràn trang ---- */
.d-scroll, .t-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html.js .reveal, html.js .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}