/* ══ TRẦM HƯƠNG — hệ thiết kế website Thầy Trường ══ */
:root{
  --ground:#17140F; --surface:#1E1A14; --surface-2:#282219;
  --ink:#F2EBE0; --ink-mute:#A89C8A; --ink-dim:#776E60;
  --rule:#332C22; --rule-soft:#241F19;
  --accent:#C8544A; --accent-hi:#DE6C61;
  --brass:#B08D57; --brass-dim:#7A6238;
  --sage:#84987F;
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --body:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,sans-serif;
  --s1:.5rem; --s2:.875rem; --s3:1.375rem; --s4:2.25rem; --s5:3.5rem; --s6:5.5rem; --s7:8rem;
  --wrap:min(1140px,calc(100vw - 2.5rem));
  --narrow:min(760px,calc(100vw - 2.5rem));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-weight:300;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding-bottom:64px; /* chừa chỗ cho thanh CTA mobile */
}
@media (min-width:820px){body{padding-bottom:0}}
h1,h2,h3,h4{scroll-margin-top:88px;font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.01em;line-height:1.14}
p{margin:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-color:var(--brass-dim);text-underline-offset:.22em}
a:hover{text-decoration-color:var(--brass)}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;border-radius:2px}
::selection{background:var(--brass);color:var(--ground)}

.wrap{width:var(--wrap);margin-inline:auto}
.narrow{width:var(--narrow);margin-inline:auto}
.eyebrow{font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);
  display:flex;align-items:center;gap:.8rem}
.eyebrow::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--rule),transparent)}
.lede{font-size:1.14rem;color:var(--ink-mute)}
.tnum{font-variant-numeric:tabular-nums}

/* ── reveal ── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
.no-js .rv{opacity:1;transform:none}

/* ── HEADER ── */
.hdr{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--rule-soft)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:.85rem 0}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex-shrink:0}
.brand-mark{width:30px;height:30px;flex-shrink:0}
.brand-txt{font-family:var(--display);font-size:1.06rem;line-height:1.1}
.brand-txt small{display:block;font-family:var(--body);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);font-weight:500;margin-top:.1rem}
.nav{display:none;gap:var(--s3);align-items:center}
@media (min-width:960px){.nav{display:flex}}
.nav a{font-size:.9rem;color:var(--ink-mute);text-decoration:none;padding:.25rem 0;position:relative}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--brass)}
.hdr-cta{display:none;align-items:center;gap:.6rem}
@media (min-width:820px){.hdr-cta{display:flex}}
.navtoggle{display:flex;align-items:center;gap:.45rem;background:none;border:1px solid var(--rule);
  color:var(--ink-mute);font:inherit;font-size:.82rem;padding:.42rem .8rem;border-radius:999px;cursor:pointer}
@media (min-width:960px){.navtoggle{display:none}}
.mobnav{display:none;border-top:1px solid var(--rule-soft);padding:var(--s2) 0 var(--s3)}
.mobnav.open{display:block}
.mobnav a{display:block;padding:.6rem 0;font-size:1.02rem;text-decoration:none;color:var(--ink-mute);
  border-bottom:1px solid var(--rule-soft)}
.mobnav a:last-child{border-bottom:0}

/* ── nút ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-size:.92rem;font-weight:500;text-decoration:none;cursor:pointer;
  padding:.72rem 1.35rem;border-radius:2px;border:1px solid transparent;transition:.18s;white-space:nowrap}
.btn-call{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-call:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
.btn-zalo{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-zalo:hover{border-color:var(--brass);color:var(--brass)}
.btn-ghost{background:transparent;color:var(--brass);border-color:var(--brass-dim);font-size:.86rem;padding:.55rem 1.1rem}
.btn-ghost:hover{border-color:var(--brass);background:color-mix(in srgb,var(--brass) 10%,transparent)}
.btn svg{width:15px;height:15px;flex-shrink:0}

/* thanh CTA cố định trên mobile */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:1fr 1fr;
  background:var(--surface);border-top:1px solid var(--rule)}
@media (min-width:820px){.dock{display:none}}
.dock a{display:flex;align-items:center;justify-content:center;gap:.45rem;padding:1rem .5rem;
  text-decoration:none;font-size:.94rem;font-weight:500}
.dock .d-call{background:var(--accent);color:#fff}
.dock .d-zalo{color:var(--ink)}

/* ── HERO ── */
.hero{padding:var(--s6) 0 var(--s5);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 78% 22%,color-mix(in srgb,var(--brass) 11%,transparent),transparent 62%)}
.hero-in{position:relative;display:grid;gap:var(--s5);align-items:center}
@media (min-width:940px){.hero-in{grid-template-columns:1.15fr .85fr;gap:var(--s6)}}
.hero h1{font-size:clamp(2.5rem,6.4vw,4.3rem);margin:var(--s3) 0}
.hero h1 .l{display:block}
.hero h1 em{font-style:italic;color:var(--brass)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.freebar{margin-top:var(--s3);padding:.7rem 1rem;border-left:2px solid var(--sage);
  background:color-mix(in srgb,var(--sage) 8%,transparent);font-size:.9rem;color:var(--ink-mute);max-width:44ch}
.freebar b{color:var(--sage);font-weight:500}
#compass{width:100%;max-width:420px;margin-inline:auto;height:auto}

/* ── SECTION ── */
.sec{padding:var(--s6) 0;border-top:1px solid var(--rule-soft)}
.sec-tight{padding:var(--s5) 0}
.shead{margin-bottom:var(--s4);max-width:62ch}
.shead h2{font-size:clamp(1.7rem,3.6vw,2.5rem);margin-top:var(--s2)}
.shead p{color:var(--ink-mute);margin-top:var(--s2)}

/* ── thẻ vấn đề ── */
.concerns{display:grid;gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft)}
@media (min-width:640px){.concerns{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.concerns{grid-template-columns:repeat(5,1fr)}}
.cn{background:var(--ground);padding:var(--s3);text-decoration:none;display:flex;flex-direction:column;
  gap:.5rem;transition:.2s;min-height:150px}
.cn:hover{background:var(--surface)}
.cn-ic{width:26px;height:26px;color:var(--brass)}
.cn b{font-weight:500;font-size:1rem}
.cn span{font-size:.83rem;color:var(--ink-dim);margin-top:auto}

/* ── số liệu ── */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-soft);border-block:1px solid var(--rule-soft)}
@media (min-width:820px){.stats{grid-template-columns:repeat(4,1fr)}}
.st{background:var(--ground);padding:var(--s4) var(--s3)}
.st-n{font-family:var(--display);font-size:clamp(2rem,4.5vw,2.9rem);color:var(--brass);line-height:1;font-variant-numeric:tabular-nums}
.st-l{font-size:.84rem;color:var(--ink-mute);margin-top:.6rem}

/* ── about ── */
.about{display:grid;gap:var(--s4)}
@media (min-width:900px){.about{grid-template-columns:.85fr 1.15fr;gap:var(--s6);align-items:start}}
.about p+p{margin-top:var(--s3)}
.about .draft{border-left:2px solid var(--brass-dim);padding-left:var(--s3)}
.schools{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:var(--s3)}
.school{font-size:.78rem;border:1px solid var(--rule);padding:.25rem .7rem;color:var(--ink-mute)}

/* ảnh placeholder */
.ph{position:relative;background:linear-gradient(135deg,var(--surface),var(--surface-2));
  border:1px dashed var(--brass-dim);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  color:var(--ink-mute);font-size:.78rem;text-align:center;padding:var(--s3);aspect-ratio:4/5}
.ph::before{content:"";width:26px;height:26px;border:1px solid var(--brass-dim);border-radius:50%;
  background:radial-gradient(circle at 50% 45%,var(--brass-dim) 0 3px,transparent 3px);opacity:.7}
.ph.wide{aspect-ratio:16/10}
.ph.sq{aspect-ratio:1}
.ph::after{content:"ảnh sẽ thay sau";font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.ph b{font-weight:500;color:var(--ink);font-size:.9rem;max-width:20ch}

/* ── dịch vụ ── */
.svcs{display:grid;gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft)}
@media (min-width:760px){.svcs{grid-template-columns:1fr 1fr}}
.svc{background:var(--ground);padding:var(--s4);text-decoration:none;display:flex;flex-direction:column;transition:.2s}
.svc:hover{background:var(--surface)}
.svc-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)}
.svc h3{font-size:1.5rem}
.svc-cn{font-family:var(--display);font-size:1.1rem;color:var(--brass-dim)}
.svc-d{color:var(--ink-mute);font-size:.93rem;margin-top:.7rem;flex:1}
.svc-f{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);margin-top:var(--s3);
  padding-top:var(--s2);border-top:1px solid var(--rule-soft)}
.svc-p{font-size:.9rem;color:var(--sage);font-variant-numeric:tabular-nums}
.svc-go{font-size:.82rem;color:var(--brass)}

/* ── quy trình ── */
.steps{display:grid;gap:0;border-top:1px solid var(--rule-soft)}
.step{display:grid;grid-template-columns:2.6rem 1fr;gap:var(--s2) var(--s3);padding:var(--s3) 0;
  border-bottom:1px solid var(--rule-soft)}
@media (min-width:820px){.step{grid-template-columns:2.6rem 13rem 1fr;align-items:baseline}}
.step-n{font-family:var(--display);color:var(--brass);font-variant-numeric:tabular-nums}
.step-t{font-weight:500}
.step-d{color:var(--ink-mute);font-size:.93rem;grid-column:2/-1}
@media (min-width:820px){.step-d{grid-column:auto}}

/* ── công cụ ── */
.tools{display:grid;gap:var(--s3)}
@media (min-width:760px){.tools{grid-template-columns:1fr 1fr}}
.tool{background:var(--surface);border:1px solid var(--rule);padding:var(--s4);text-decoration:none;
  display:flex;flex-direction:column;gap:.7rem;transition:.2s}
.tool:hover{border-color:var(--brass-dim);background:var(--surface-2)}
.tool h3{font-size:1.35rem}
.tool p{color:var(--ink-mute);font-size:.92rem}
.tool .tag{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}

/* ── gallery hiện vật ── */
.objs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
@media (min-width:760px){.objs{grid-template-columns:repeat(4,1fr)}}

/* ── trích dẫn ── */
.quote{padding:var(--s7) 0;text-align:center;border-top:1px solid var(--rule-soft)}
.quote blockquote{margin:0;font-family:var(--display);font-size:clamp(1.5rem,3.6vw,2.3rem);
  line-height:1.35;max-width:22ch;margin-inline:auto;color:var(--ink)}
.quote cite{display:block;margin-top:var(--s3);font-family:var(--body);font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass);font-style:normal}

/* ── FOOTER ── */
.ft{border-top:1px solid var(--rule);padding:var(--s5) 0 var(--s4);background:var(--surface)}
.ft-grid{display:grid;gap:var(--s4)}
@media (min-width:820px){.ft-grid{grid-template-columns:1.3fr 1fr 1fr}}
.ft h4{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);
  font-family:var(--body);font-weight:500;margin-bottom:var(--s2)}
.ft a{display:block;color:var(--ink-mute);text-decoration:none;font-size:.9rem;padding:.2rem 0}
.ft a:hover{color:var(--ink)}
.ft-note{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule);
  font-size:.78rem;color:var(--ink-dim);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between}
.ft-big{font-family:var(--display);font-size:1.6rem;color:var(--ink)}

/* ── trang con ── */
.phero{padding:var(--s6) 0 var(--s4);border-bottom:1px solid var(--rule-soft)}
.phero h1{font-size:clamp(2.1rem,5.2vw,3.4rem);margin:var(--s3) 0 var(--s2)}
.crumb{font-size:.8rem;color:var(--ink-dim)}
.crumb a{text-decoration:none;color:var(--brass)}
.prose{max-width:66ch}
.prose h2{font-size:1.6rem;margin:var(--s5) 0 var(--s2)}
.prose h3{font-size:1.2rem;margin:var(--s4) 0 var(--s1);font-family:var(--body);font-weight:500}
.prose p+p{margin-top:var(--s3)}
.prose ul{margin:var(--s2) 0;padding-left:1.1rem;color:var(--ink-mute)}
.prose li{margin:.35rem 0}
.prose li::marker{color:var(--brass-dim)}
.pricebox{border:1px solid var(--rule);background:var(--surface);padding:var(--s4);margin:var(--s4) 0}
.pricerow{display:flex;justify-content:space-between;gap:var(--s3);padding:.7rem 0;border-bottom:1px solid var(--rule-soft);align-items:baseline}
.pricerow:last-child{border-bottom:0}
.pricerow b{font-weight:400}
.pricerow span{color:var(--sage);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.94rem}
.callout{border-left:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent);
  padding:var(--s3);margin:var(--s4) 0;font-size:.95rem}
.callout.calm{border-left-color:var(--brass);background:color-mix(in srgb,var(--brass) 7%,transparent)}
.endcta{border-top:1px solid var(--rule);margin-top:var(--s6);padding-top:var(--s4);
  display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.endcta p{flex:1;min-width:16rem;color:var(--ink-mute);font-size:.95rem}

/* ── CÔNG CỤ (form + kết quả) ── */
.tform{background:var(--surface);border:1px solid var(--rule);padding:var(--s4);margin:var(--s4) 0}
.frow{display:grid;gap:var(--s2);margin-bottom:var(--s3)}
@media (min-width:620px){.frow{grid-template-columns:1fr 1fr}.frow.one{grid-template-columns:1fr}}
label{display:block;font-size:.8rem;letter-spacing:.06em;color:var(--ink-mute);margin-bottom:.35rem}
input,select{width:100%;font:inherit;font-size:1rem;padding:.65rem .8rem;background:var(--ground);
  color:var(--ink);border:1px solid var(--rule);border-radius:2px}
input:focus,select:focus{border-color:var(--brass)}
.hint{font-size:.78rem;color:var(--ink-dim);margin-top:.35rem}
.res{margin-top:var(--s4);scroll-margin-top:88px}
.res:empty{display:none}
.rescard{border:1px solid var(--rule);background:var(--surface);padding:var(--s4);margin-top:var(--s3)}
.cung{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.cung b{font-family:var(--display);font-size:2rem;color:var(--brass);font-weight:400}
.cung span{font-size:.9rem;color:var(--ink-mute)}
.dirs{display:grid;gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft);margin-top:var(--s3)}
@media (min-width:560px){.dirs{grid-template-columns:1fr 1fr}}
.dir{background:var(--ground);padding:.85rem 1rem;display:flex;flex-direction:column;gap:.18rem}
.dir em{font-style:normal;font-size:.83rem;color:var(--ink-mute);line-height:1.5}
.dir.good b{color:var(--sage)}
.dir.bad b{color:var(--accent)}
.dir b{font-weight:500;font-size:.98rem}
.daylist{margin-top:var(--s3);border-top:1px solid var(--rule-soft)}
.day{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem var(--s3);padding:.85rem 0;
  border-bottom:1px solid var(--rule-soft);align-items:baseline}
.day-d{font-family:var(--display);font-size:1.15rem;font-variant-numeric:tabular-nums}
.day-m{font-size:.85rem;color:var(--ink-mute)}
.day-s{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.day-s.ok{color:var(--sage)}
.day-s.mid{color:var(--brass)}
.day-s.no{color:var(--accent)}
.day-x{grid-column:1/-1;font-size:.83rem;color:var(--ink-dim)}
.legend{font-size:.82rem;color:var(--ink-dim);margin-top:var(--s3);border-top:1px solid var(--rule-soft);padding-top:var(--s3)}
.legend b{color:var(--ink-mute);font-weight:500}

/* ── loader ── */
#gate{position:fixed;inset:0;z-index:200;background:var(--ground);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--s4);transition:opacity .7s ease,visibility .7s}
#gate.gone{opacity:0;visibility:hidden}
#gate svg{width:min(200px,45vw);height:auto}
#gate .gt{font-family:var(--display);font-size:1.1rem;color:var(--ink-mute);letter-spacing:.02em}
#gate button{background:none;border:1px solid var(--rule);color:var(--brass);font:inherit;font-size:.82rem;
  padding:.5rem 1.4rem;border-radius:999px;cursor:pointer;letter-spacing:.06em}
#gate button:hover{border-color:var(--brass)}
.gate-ring{fill:none;stroke:var(--brass);stroke-width:1;opacity:.6}
.gate-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 2s cubic-bezier(.5,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.gate-draw{animation:none;stroke-dashoffset:0}}

/* ════════════════════════════════════════════════════════════
   LỚP CHUYỂN ĐỘNG — "KHÍ"
   Nguyên tắc: chỉ transform và opacity. Chậm, có lớp, có nghĩa.
   Mọi thứ tắt sạch khi prefers-reduced-motion.
   ════════════════════════════════════════════════════════════ */
@view-transition { navigation: auto }

/* ── nền động: hai lớp khói trầm trôi rất chậm ── */
.amb{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.amb i{position:absolute;display:block;border-radius:50%;filter:blur(90px);will-change:transform}
.amb .a1{width:46vw;height:46vw;left:-8vw;top:-10vw;
  background:radial-gradient(circle,rgba(176,141,87,.16),transparent 68%);animation:drift1 52s ease-in-out infinite alternate}
.amb .a2{width:52vw;height:52vw;right:-14vw;top:18vh;
  background:radial-gradient(circle,rgba(200,84,74,.10),transparent 68%);animation:drift2 68s ease-in-out infinite alternate}
.amb .a3{width:38vw;height:38vw;left:26vw;bottom:-16vw;
  background:radial-gradient(circle,rgba(132,152,127,.09),transparent 70%);animation:drift3 84s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(14vw,10vh,0) scale(1.18)}}
@keyframes drift2{to{transform:translate3d(-12vw,-8vh,0) scale(.86)}}
@keyframes drift3{to{transform:translate3d(8vw,-12vh,0) scale(1.12)}}
/* hạt giấy dó */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
main,.ft{position:relative;z-index:2}
.hdr{z-index:60}
.dock{z-index:70}
#gate{z-index:200}

/* ── trục cuộn bên trái ── */
.rail{position:fixed;left:18px;top:0;bottom:0;width:1px;z-index:3;pointer-events:none;display:none}
@media (min-width:1180px){.rail{display:block}}
.rail::before{content:"";position:absolute;inset:0;background:var(--rule)}
.rail i{position:absolute;left:0;top:0;width:1px;transform-origin:top;transform:scaleY(0);
  background:linear-gradient(180deg,var(--brass),var(--accent));height:100%}
.rail b{position:absolute;left:-3px;width:7px;height:7px;border-radius:50%;background:var(--brass);
  box-shadow:0 0 12px 2px rgba(176,141,87,.6);transform:translateY(-50%);top:0}

/* ── con trỏ: dùng con trỏ hệ thống, không thay thế ──
   Vòng bám trễ tạo cảm giác chậm và khó nhắm. Con trỏ hệ thống phản hồi tức thì.
   Chất cao cấp dồn vào trạng thái hover của nút, thẻ và link. */
a,button,.tab,label,summary{cursor:pointer}
.compass-wrap{cursor:crosshair}
input,select,textarea{cursor:text}
select{cursor:pointer}

/* ── hiện dần: mặc định + biến thể ── */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.09s}.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}.rv[data-d="4"]{transition-delay:.36s}

/* con nối tiếp trong một khối */
.stg>*{opacity:0;transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.stg.in>*{opacity:1;transform:none}
.stg.in>*:nth-child(1){transition-delay:.04s}.stg.in>*:nth-child(2){transition-delay:.12s}
.stg.in>*:nth-child(3){transition-delay:.2s}.stg.in>*:nth-child(4){transition-delay:.28s}
.stg.in>*:nth-child(5){transition-delay:.36s}.stg.in>*:nth-child(6){transition-delay:.44s}
.stg.in>*:nth-child(7){transition-delay:.52s}

/* dòng chữ trồi lên từ mặt nạ */
.msk{display:block;overflow:hidden}
.msk>.mw{display:block;transform:translateY(105%);
  transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.msk.in>.mw{transform:none}
.msk[data-d="1"]>.mw{transition-delay:.1s}
.msk[data-d="2"]>.mw{transition-delay:.2s}
.msk[data-d="3"]>.mw{transition-delay:.3s}

/* đường kẻ vẽ dần */
.ln{transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.ln.in{transform:none}
.eyebrow::after{transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.16,1,.3,1) .15s}
.in .eyebrow::after,.eyebrow.in::after{transform:none}

/* ── nút: từ tính + sóng gọi ── */
.btn{position:relative;overflow:hidden;will-change:transform;
  transition:background .18s,border-color .18s,color .18s,transform .5s cubic-bezier(.16,1,.3,1)}
.btn>*{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;z-index:1;opacity:0;transform:scale(.6);
  background:radial-gradient(circle at var(--bx,50%) var(--by,50%),rgba(255,255,255,.22),transparent 62%);
  transition:opacity .35s,transform .5s cubic-bezier(.16,1,.3,1)}
.btn:hover::before{opacity:1;transform:scale(1)}
.btn-call::after{content:"";position:absolute;inset:0;z-index:0;border:1px solid var(--accent);
  opacity:0;animation:ping 4.6s cubic-bezier(.2,.8,.4,1) infinite}
@keyframes ping{0%{opacity:.6;transform:scale(1)}55%,100%{opacity:0;transform:scale(1.28)}}
.btn-zalo::before{background:radial-gradient(circle at var(--bx,50%) var(--by,50%),rgba(176,141,87,.22),transparent 62%)}

/* gạch chân chạy cho link trong bài */
.prose p a,.crumb a,.ft a{position:relative;text-decoration:none}
.prose p a::after,.crumb a::after,.ft a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--brass);transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.prose p a:hover::after,.crumb a:hover::after,.ft a:hover::after{transform:none;transform-origin:left}
.prose p a{color:var(--brass)}

/* ── thẻ: đèn rọi theo chuột + viền vẽ ── */
.cn,.svc,.tool,.st,.ask{position:relative;isolation:isolate}
.cn::before,.svc::before,.tool::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(176,141,87,.13),transparent 62%);
  transition:opacity .4s}
.cn:hover::before,.svc:hover::before,.tool:hover::before{opacity:1}
.cn::after,.svc::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:linear-gradient(90deg,var(--brass),var(--accent));transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.16,1,.3,1)}
.cn:hover::after,.svc:hover::after{transform:none}
.cn-ic{transition:transform .5s cubic-bezier(.16,1,.3,1),color .3s}
.cn:hover .cn-ic{transform:translateY(-3px) scale(1.06);color:var(--accent)}
.svc h3,.tool h3{transition:color .3s}
.svc:hover h3,.tool:hover h3{color:var(--brass)}
.svc-go{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.svc:hover .svc-go,.tool:hover .svc-go{transform:translateX(5px)}

/* số đếm */
.st-n{transition:color .4s}
.st:hover .st-n{color:var(--accent)}

/* ── la kinh ── */
.compass-wrap{position:relative;perspective:1000px;will-change:transform}
#compass{transform-style:preserve-3d;transition:transform .9s cubic-bezier(.16,1,.3,1)}
#compass .son{transition:opacity .3s}
#compass .son text{fill:var(--ink-mute)}
#compass .son.hot text{fill:var(--accent)!important}
#needle polygon:first-child{filter:drop-shadow(0 0 4px rgba(200,84,74,.5))}
#compass .son.hot line{stroke:var(--accent)!important;opacity:1!important}
#ring24{transform-origin:200px 200px;animation:spin24 300s linear infinite}
.compass-wrap:hover #ring24{animation-duration:110s}
@keyframes spin24{to{transform:rotate(360deg)}}
#needle{transform-origin:200px 200px;transition:transform .55s cubic-bezier(.16,1,.3,1)}
#cat text{animation:breathe 5.4s ease-in-out infinite}
#cat text:nth-child(2){animation-delay:1.35s}
#cat text:nth-child(3){animation-delay:2.7s}
#cat text:nth-child(4){animation-delay:4.05s}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}
#quaG g{transition:opacity .4s,transform .4s}
.compass-wrap:hover #quaG g{opacity:1}

/* ── ô ảnh chờ: quét sáng ── */
.ph{overflow:hidden}
.ph i.sheen{position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(176,141,87,.12) 50%,transparent 62%);
  transform:translateX(-100%);animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%,62%{transform:translateX(-100%)}86%,100%{transform:translateX(100%)}}

/* ── ô nhập ── */
input,select{transition:border-color .3s,box-shadow .3s,background .3s}
input:focus,select:focus{box-shadow:0 0 0 3px rgba(176,141,87,.14);background:var(--surface)}

/* ── kết quả công cụ hiện từng dòng ── */
.day{opacity:0;transform:translateY(10px);animation:dayin .55s cubic-bezier(.16,1,.3,1) forwards}
@keyframes dayin{to{opacity:1;transform:none}}
.dir{opacity:0;transform:translateY(8px);animation:dayin .5s cubic-bezier(.16,1,.3,1) forwards}
.rescard{animation:cardin .7s cubic-bezier(.16,1,.3,1)}
@keyframes cardin{from{opacity:0;transform:translateY(18px)}}

/* ── header thu gọn khi cuộn ── */
.hdr{transition:padding .4s cubic-bezier(.16,1,.3,1),background .4s,border-color .4s}
.hdr-in{transition:padding .4s cubic-bezier(.16,1,.3,1)}
html.scrolled .hdr-in{padding:.5rem 0}
html.scrolled .hdr{border-color:var(--rule)}
.brand-mark{transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.brand:hover .brand-mark{transform:rotate(180deg)}

/* ── cổng vào ── */
#gate svg .g1{animation:draw 1.15s cubic-bezier(.5,0,.2,1) .1s forwards}
#gate svg .g2{animation:draw 1.15s cubic-bezier(.5,0,.2,1) .35s forwards}
#gate .gtick{opacity:0;animation:tin .5s ease forwards}
#gate .gq{opacity:0;animation:tin .8s ease 1.15s forwards}
@keyframes tin{to{opacity:.8}}
#gate .gt{opacity:0;animation:up .9s cubic-bezier(.16,1,.3,1) 1.3s forwards}
#gate button{opacity:0;animation:up .9s cubic-bezier(.16,1,.3,1) 1.6s forwards}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── chuyển trang (bản xem trước) ── */
.pt-out{opacity:0;transform:translateY(-10px);transition:opacity .28s ease,transform .28s ease}
.pt-in{animation:ptin .6s cubic-bezier(.16,1,.3,1)}
@keyframes ptin{from{opacity:0;transform:translateY(14px)}}

/* ════ TẮT SẠCH KHI NGƯỜI DÙNG YÊU CẦU GIẢM CHUYỂN ĐỘNG ════ */
@media (prefers-reduced-motion:reduce){
  .amb,.grain,.rail{display:none}
  .rv,.stg>*,.msk>.mw,.ln,.eyebrow::after{opacity:1!important;transform:none!important;transition:none!important}
  .day,.dir,.rescard,#gate .gt,#gate button,#gate .gq,#gate .gtick{opacity:1!important;animation:none!important;transform:none!important}
  #ring24,#cat text,.ph i.sheen,.btn-call::after{animation:none!important}
  *{transition-duration:.01ms!important}
}

/* ── tiết chế trên máy nhỏ: giữ sắc nền, bỏ chuyển động nặng GPU ── */
@media (max-width:900px){
  .amb i{animation:none;filter:blur(70px)}
  .amb .a2{opacity:.75}
  .grain{opacity:.04}
}
@media (max-width:520px){
  .amb .a3{display:none}
}

/* ══ ẢNH VÀ VIDEO THẬT ══ */
.fig{margin:0;position:relative;overflow:hidden;background:var(--surface);
  border:1px solid var(--rule-soft)}
.fig img,.fig video{display:block;width:100%;height:100%;object-fit:cover}
.fig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(23,20,15,.42));
  mix-blend-mode:multiply;opacity:.85}
.fig::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 60px 10px rgba(23,20,15,.55)}
.p45{aspect-ratio:4/5}
.p169{aspect-ratio:16/10}
.sq.fig{aspect-ratio:1}
/* chọn phần muốn giữ khi cắt vuông từ ảnh dọc */
.fig.top img{object-position:50% 16%}
.fig.upper img{object-position:50% 30%}
.fig img{transition:transform 1.4s cubic-bezier(.16,1,.3,1),filter .6s}
.objs .fig:hover img,.about .fig:hover img{transform:scale(1.045)}

/* video la kinh */
.fig-vid video{background:var(--ground)}
.fig-vid::after{background:linear-gradient(180deg,transparent 55%,rgba(23,20,15,.35))}

/* khối video + chữ */
.feature{display:grid;gap:var(--s4);align-items:center}
@media (min-width:860px){.feature{grid-template-columns:.72fr 1fr;gap:var(--s5)}}
.feature-txt p+p{margin-top:var(--s3)}
.feature-txt p{color:var(--ink-mute)}

@media (prefers-reduced-motion:reduce){
  .fig img{transition:none}
  .fig-vid video{display:none}
  .fig-vid{background-image:var(--poster)}
}