/*
 * main.css — giao diện mới tohathanhtuyen.com 2026 (KE-HOACH-REDESIGN-2026.md)
 * Chuyển từ prototype redesign-2026/index.html. Quy tắc vàng: mọi trạng thái
 * ẨN BAN ĐẦU đều nằm sau `html.js` — không có JS (hoặc reduced-motion, vì
 * head.php chỉ gắn class .js khi không reduced-motion) thì nội dung hiện đủ.
 */

:root {
  --ttb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ttb-cream: #F4F1EC;
  --ttb-ink: #171717;
  --ttb-brand: #067A38;
}

html { background: var(--ttb-cream); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--ttb-cream);
  color: var(--ttb-ink);
  overflow-x: hidden;
}

::selection { background: var(--ttb-brand); color: #fff; }

/* ══ Curtain chuyển trang ══ */
#ttb-curtain {
  position: fixed; inset: 0; z-index: 9998; background: var(--ttb-ink);
  display: flex; align-items: center; justify-content: center;
  transform: scaleY(0); transform-origin: top; pointer-events: none;
}
html.js #ttb-curtain.boot { transform: scaleY(1); transform-origin: bottom; }
#ttb-curtain .logo { color: #fff; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; opacity: 0; }
#ttb-curtain.boot .logo { opacity: 1; }

/* ══ Liquid Glass (theo spec hero) ══ */
.liquid-glass {
  background: rgba(0, 0, 0, 0.4);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.3) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ══ Hero: chữ chạy từng ký tự (spec: 30ms/ký tự, transition 500ms) ══ */
.hero-char {
  display: inline-block;
  transition-property: opacity, transform;
  transition-duration: 500ms;
  transition-timing-function: var(--ttb-ease);
  will-change: opacity, transform;
}
html.js .hero-char { opacity: 0; transform: translateX(-18px); }
html.js .hero-char.on { opacity: 1; transform: translateX(0); }

/* ══ Fade theo delay (hero: 800/1200/1400ms) ══ */
.fade-el { transition-property: opacity; transition-duration: 1000ms; }
html.js .fade-el { opacity: 0; }
html.js .fade-el.on { opacity: 1; }

/* ══ Reveal 1 lần (ttbOnSeen gắn .is-seen) ══ */
html.js [data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s var(--ttb-ease), transform .9s var(--ttb-ease);
}
html.js [data-reveal].is-seen { opacity: 1; transform: none; }

html.js [data-reveal-group] > .rv {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s var(--ttb-ease), transform .9s var(--ttb-ease);
  transition-delay: var(--rv-delay, 0ms);
}
html.js [data-reveal-group].is-seen > .rv { opacity: 1; transform: none; }

/* ══ Ảnh: reveal mask + zoom về 1 ══ */
.img-reveal { overflow: hidden; }
html.js .img-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ttb-ease); }
html.js .img-reveal.is-seen { clip-path: inset(0 0 0% 0); }
html.js .img-reveal > img { transform: scale(1.25); transition: transform 1.6s var(--ttb-ease); will-change: transform; }
html.js .img-reveal.is-seen > img { transform: scale(1); }

/* ══ Card ảnh hover zoom ══ */
.card-img { overflow: hidden; }
.card-img img { transition: transform .8s var(--ttb-ease); }
.group:hover .card-img img { transform: scale(1.06); }

/* ══ Custom cursor (blend difference — chạy trên cả nền sáng lẫn video tối) ══ */
#cursor-dot, #cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  border-radius: 50%; transform: translate(-50%, -50%);
  mix-blend-mode: difference; display: none;
}
html.js.fine-pointer #cursor-dot, html.js.fine-pointer #cursor-ring { display: block; }
#cursor-dot { width: 6px; height: 6px; background: #fff; }
#cursor-ring {
  width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.35);
  transition: width .3s, height .3s, background .3s, border-color .3s;
}
#cursor-ring.grow { width: 72px; height: 72px; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.6); }

/* ══ Marquee (thuần CSS) ══ */
@keyframes ttb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; width: max-content; animation: ttb-marquee 40s linear infinite; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ══ Nav ══ */
#nav-wrap { transition: transform .5s var(--ttb-ease); }
#nav-wrap.hidden-nav { transform: translateY(-130%); }
#nav-wrap nav, #nav-wrap nav a { transition: color .4s, background-color .4s; }
#nav-wrap.nav-light nav {
  color: var(--ttb-ink); background: rgba(255,255,255,0.6);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.6), 0 8px 30px rgba(0,0,0,0.06);
}
#nav-wrap.nav-light nav a:hover { color: #555; }
#nav-wrap.nav-light .nav-cta { background: var(--ttb-ink); color: #fff; }
#nav-wrap.nav-light .nav-cta:hover { background: #333; }

/* Menu mobile */
#mobile-menu { display: none; }
#mobile-menu.open { display: block; }

/* ══ Thanh tiến độ đọc ══ */
#progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--ttb-ink); width: 0; z-index: 60; }

/* ══ Hàng "vì sao chọn" ══ */
.why-row { border-top: 1px solid rgba(0,0,0,0.12); transition: background .4s; }
.why-row:last-child { border-bottom: 1px solid rgba(0,0,0,0.12); }
.why-row:hover { background: rgba(0,0,0,0.04); }

/* ══ FAQ ══ */
.faq-item { border-top: 1px solid rgba(0,0,0,0.12); }
.faq-item:last-of-type { border-bottom: 1px solid rgba(0,0,0,0.12); }
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { transition: transform .4s var(--ttb-ease); }
.faq-item[open] .faq-icon { transform: rotate(45deg); }

/* ══ Form (hợp đồng lead-capture.js: .form-msg do JS bơm class màu) ══ */
.field {
  width: 100%; background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.1);
  border-radius: 0.75rem; padding: 0.8rem 1rem; font-size: 0.875rem; color: var(--ttb-ink);
  transition: border-color .3s, background .3s;
}
.field:focus { outline: none; border-color: var(--ttb-ink); background: #fff; box-shadow: none; }

/* ══ Giỏ hàng cuộn ngang ══ */
#h-scroll-wrap { overflow-x: auto; }
#h-scroll-wrap.pinned { overflow-x: hidden; }

/* ══ Chip lọc /san-pham/ ══ */
.chip {
  border: 1px solid rgba(0,0,0,0.15); border-radius: 999px; padding: 0.45rem 1rem;
  font-size: 0.8rem; cursor: pointer; transition: all .3s; background: transparent; color: var(--ttb-ink);
}
.chip:hover { border-color: var(--ttb-ink); }
.chip.is-active { background: var(--ttb-ink); color: #fff; border-color: var(--ttb-ink); }