/* ============ below the fold ============ */
/* ===== SURFACE SYSTEM =====
   Every raised thing is the same material: dark glass, a hairline of light along
   its top edge, and a galaxy spotlight that follows the cursor. */
.glass{position:relative;border-radius:18px;overflow:hidden;
  background:linear-gradient(168deg,rgba(27,42,78,.74),rgba(10,19,44,.66));
  border:1px solid rgba(112,130,180,.26)}
.glass::before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(178,205,255,.5),transparent)}
.lit{isolation:isolate}
.lit .glow,.lit .edge{position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .42s var(--ease-soft)}
.lit .glow{z-index:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),
    rgba(150,126,240,.30) 0%,rgba(126,216,236,.12) 34%,transparent 66%)}
.lit .edge{z-index:2;padding:1px;border-radius:inherit;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
    rgba(182,152,255,.92) 0%,rgba(126,216,236,.38) 42%,transparent 68%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}
.lit:hover .glow,.lit:focus-within .glow,
.lit:hover .edge,.lit:focus-within .edge{opacity:1}
.lit>*:not(.glow):not(.edge){position:relative;z-index:1}
@media (hover:none){.lit .glow,.lit .edge{display:none}}


.page{position:relative;z-index:2;background:rgba(5,12,30,.62)}
.page section{padding:clamp(62px,7.2vw,112px) var(--gut);position:relative;scroll-margin-top:84px}
.wrap{max-width:1200px;margin:0 auto}
.lede{font-family:var(--mono);font-size:11px;letter-spacing:.26em;color:var(--cyan);
  text-transform:uppercase;display:flex;align-items:center;gap:11px;margin-bottom:20px}
.lede::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px rgba(207,196,255,.9);flex:none}
h2.big{font-family:var(--display);font-weight:500;letter-spacing:-.022em;line-height:1.12;
  font-size:clamp(27px,4.1vw,54px);max-width:18ch}
.dek{margin-top:18px;max-width:52ch;color:var(--text-secondary);font-size:clamp(15px,1.35vw,18px)}

/* entrances */
.in-up{opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.on .in-up{opacity:1;transform:none}
.on .st:nth-child(1){transition-delay:0ms}
.on .st:nth-child(2){transition-delay:80ms}
.on .st:nth-child(3){transition-delay:160ms}
.on .st:nth-child(4){transition-delay:240ms}
.on .st:nth-child(5){transition-delay:320ms}
.on.done .st:nth-child(1),.on.done .st:nth-child(2),.on.done .st:nth-child(3),
.on.done .st:nth-child(4),.on.done .st:nth-child(5){transition-delay:0s!important}

/* ---- A. numbers: one horizontal rail, hairlines between, no boxes ---- */
.rail3{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;
  gap:clamp(20px,4vw,64px);padding:clamp(28px,3.4vw,44px) clamp(24px,3vw,44px)}
.rail3 li{position:relative}
.rail3 li+li::before{content:"";position:absolute;left:calc(-1*clamp(10px,2vw,32px));top:6px;bottom:6px;
  width:1px;background:linear-gradient(rgba(96,112,158,0),rgba(96,112,158,.4),rgba(96,112,158,0))}
.rail3 .n{font-family:var(--display);font-weight:700;font-size:clamp(38px,5.6vw,76px);line-height:.92;
  color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.rail3 .n em{font-style:normal;color:var(--accent)}
.rail3 .l{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-secondary)}
@media (max-width:760px){.rail3{grid-template-columns:1fr;gap:26px}
  .rail3 li+li::before{left:0;right:0;top:calc(-13px);bottom:auto;width:auto;height:1px;
    background:linear-gradient(90deg,rgba(96,112,158,0),rgba(96,112,158,.4),rgba(96,112,158,0))}}

/* ---- B. cách hoạt động: chữ bên trái, ba bước kèm hình vẽ bên phải ---- */
.how{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(30px,4.4vw,74px);align-items:start}
@media (max-width:940px){.how{grid-template-columns:1fr}}
.how h2.big{font-size:clamp(26px,3.5vw,45px);max-width:15ch}
.steps{display:grid}
.steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,1.9vw,28px);
  align-items:start;padding:clamp(20px,2.3vw,28px) 0;
  border-top:1px solid rgba(30,44,78,.95)}
.steps li:first-child{border-top:0;padding-top:0}
.steps li:last-child{padding-bottom:0}
.steps .fig{width:clamp(54px,5vw,68px);height:clamp(54px,5vw,68px);flex:none;overflow:visible;
  margin-top:2px}
.steps .fig .orb{transform-origin:30px 30px;animation:orbit 42s linear infinite}
.on .steps .fig .glowdot{animation:seatpulse 5.2s var(--ease-soft) infinite;animation-delay:-1.4s}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes seatpulse{0%,100%{opacity:.5}50%{opacity:1}}
.steps h3{font-family:var(--display);font-weight:500;font-size:clamp(15.5px,1.55vw,19.5px);
  letter-spacing:-.012em;line-height:1.3;margin-bottom:8px;
  display:flex;align-items:baseline;gap:12px}
.steps h3 .sn{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--cyan-dim);
  font-weight:400;flex:none}
.steps p{color:var(--text-secondary);font-size:clamp(14px,1.3vw,16.5px);max-width:46ch}
.facts{margin-top:clamp(26px,3.2vw,42px);display:flex;flex-wrap:wrap;gap:9px}
.facts li{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-secondary);border:1px solid rgba(85,98,143,.45);border-radius:999px;
  padding:8px 14px;line-height:1.4}

/* ---- C. bảng giá, mẫu A: viền tím neon chạy quanh khung khi rê chuột ---- */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.cat{margin-top:clamp(30px,3.6vw,52px);scroll-margin-top:96px}
.cat h3{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-secondary);font-weight:500;margin-bottom:16px;display:flex;align-items:center;gap:13px}
.cat h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(96,112,158,.32),transparent)}
.cards{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
@media (max-width:1020px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cards{grid-template-columns:1fr}}
.card{display:block;text-decoration:none;padding:22px 22px 20px;position:relative;
  border-radius:18px;border:1px solid rgba(124,77,255,.18);
  background:linear-gradient(rgba(14,26,54,.86),rgba(8,16,38,.88));
  transition:transform .4s var(--ease),border-color .4s var(--ease)}
/* Vệt LED chạy vòng quanh mép. Vành conic để trong suốt gần hết, chỉ chừa một
   đầu sáng ở 0deg và cái đuôi mờ dần phía sau nó, nên mắt thấy một đốm chạy chứ
   không phải cả viền sáng lên cùng lúc. Mask khoét ruột để chỉ còn lại đường viền. */
.card::before{content:"";position:absolute;inset:-1px;border-radius:19px;padding:1.4px;
  background:conic-gradient(from var(--ang),
    #FFFFFF 0deg, #D8C6FF 3deg, rgba(176,120,255,.42) 9deg,
    rgba(124,77,255,0) 26deg, rgba(124,77,255,0) 252deg,
    rgba(124,77,255,.14) 292deg, rgba(160,110,255,.5) 330deg,
    #C9A6FF 350deg, #FFFFFF 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.5;animation:angspin 7s linear infinite;
  transition:opacity .45s var(--ease);pointer-events:none}
.card:hover,.card:focus-visible{transform:translateY(-4px);border-color:rgba(124,77,255,.34)}
.card:hover::before,.card:focus-visible::before{opacity:1;animation-duration:2.6s}
/* lệch pha từng thẻ trong hàng, không thì ba đốm LED chạy đều tăm tắp như đèn nháy */
.cards .card:nth-child(2)::before{animation-delay:-2.33s}
.cards .card:nth-child(3)::before{animation-delay:-4.66s}
.cat:nth-child(even) .cards .card::before{animation-delay:-1.15s}
.cat:nth-child(even) .cards .card:nth-child(2)::before{animation-delay:-3.48s}
.cat:nth-child(even) .cards .card:nth-child(3)::before{animation-delay:-5.81s}
@keyframes angspin{to{--ang:360deg}}
/* quầng tím rất nhẹ hắt ra sau thẻ, chỉ khi rê chuột */
.card::after{content:"";position:absolute;inset:8px;border-radius:16px;z-index:-1;
  box-shadow:0 0 42px -6px rgba(124,77,255,.62);opacity:0;
  transition:opacity .45s var(--ease);pointer-events:none}
.card:hover::after{opacity:1}
.card>*{position:relative;z-index:1}
.card .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:rgba(4,10,26,.82);border:1px solid rgba(96,112,158,.24);margin-bottom:18px;
  transition:border-color .4s var(--ease)}
.card:hover .ic{border-color:rgba(176,120,255,.5)}
.card .ic img{width:26px;height:26px;object-fit:contain}
.card .nm{display:block;font-weight:600;font-size:16px;line-height:1.3;color:var(--text-primary);
  margin-bottom:5px}
.card .tag{display:inline-block;margin-left:9px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  border:1px solid rgba(207,196,255,.42);border-radius:5px;padding:2px 6px;vertical-align:2px}
.card .ds{display:block;font-size:12.5px;color:var(--text-secondary);line-height:1.55;
  margin-bottom:20px;min-height:39px}
.card .bot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.card .pr{font-family:var(--display);font-weight:700;font-size:23px;color:var(--accent);
  letter-spacing:-.022em;line-height:1.05}
.card .pr small{display:block;font-family:var(--mono);font-weight:400;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);margin-top:6px}
.card .pr.q{font-size:17px;color:var(--text-secondary);font-family:var(--body);font-weight:500}
.card .go{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);white-space:nowrap;padding-bottom:3px;
  transition:color .35s var(--ease)}
.card:hover .go{color:#C79BFF}
@media (hover:none){.card::before,.card::after{display:none}}
.note{margin-top:28px;font-size:13.5px;color:var(--text-secondary)}

/* ---- D. objections: staggered, no boxes, numerals doing the work ---- */
.obj{margin-top:clamp(32px,4vw,58px);display:grid;gap:clamp(30px,3.4vw,50px)}
.obj li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.6vw,38px);
  align-items:start;max-width:860px}
.obj li:nth-child(even){margin-left:clamp(0px,10vw,190px)}
.obj .num{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.4vw,46px);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(126,216,236,.42);letter-spacing:-.04em}
.obj .q{font-family:var(--display);font-weight:500;font-size:clamp(17px,1.9vw,25px);
  line-height:1.28;letter-spacing:-.012em;margin-bottom:12px}
.obj .a{color:var(--text-secondary);font-size:clamp(14.5px,1.32vw,17px);max-width:56ch}
.obj .a b{color:var(--accent);font-weight:500}
@media (max-width:700px){.obj li{grid-template-columns:1fr;gap:10px}.obj li:nth-child(even){margin-left:0}}

/* ---- E. story: the descent rail, continued as a timeline ---- */
.tl{margin-top:clamp(32px,4vw,56px);position:relative;padding-left:clamp(26px,3vw,44px)}
.tl::before{content:"";position:absolute;left:4px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(rgba(126,216,236,.05),rgba(126,216,236,.34),rgba(126,216,236,.05))}
.tl li{position:relative;padding:0 0 clamp(30px,3.4vw,46px)}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:calc(-1*clamp(26px,3vw,44px) + 0px);top:9px;
  width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 14px rgba(207,196,255,.85);margin-left:0}
.tl .yr{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--cyan);margin-bottom:8px}
.tl .tt{font-family:var(--display);font-weight:500;font-size:clamp(17px,1.8vw,23px);
  margin-bottom:10px;letter-spacing:-.014em}
.tl .tx{color:var(--text-secondary);max-width:58ch;font-size:clamp(14.5px,1.3vw,16.5px)}

/* ---- F. faq: two columns of glass panels ---- */
.faq{margin-top:clamp(30px,3.6vw,50px);display:grid;grid-template-columns:1fr 1fr;
  gap:12px;align-items:start}
@media (max-width:860px){.faq{grid-template-columns:1fr}}
.faq details{padding:0 22px}
.faq summary{list-style:none;cursor:pointer;padding:20px 34px 20px 0;position:relative;
  font-family:var(--display);font-weight:500;font-size:clamp(14.5px,1.35vw,17px);letter-spacing:-.01em;
  line-height:1.35;transition:color .3s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--cyan)}
.faq summary::after{content:"";position:absolute;right:2px;top:calc(50% - 5px);width:9px;height:9px;
  border-right:1.5px solid var(--line-strong);border-bottom:1.5px solid var(--line-strong);
  transform:rotate(45deg);transition:transform .35s var(--ease),border-color .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--accent)}
.faq .ans{padding:0 8px 22px 0;color:var(--text-secondary);font-size:14.5px;line-height:1.66}


/* ---- footer ---- */
footer{position:relative;z-index:2;padding:clamp(58px,6vw,88px) var(--gut) 46px;
  background:rgba(2,8,20,.88);border-top:1px solid rgba(96,112,158,.18)}
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,4vw,60px)}
@media (max-width:860px){.fcols{grid-template-columns:1fr 1fr;gap:36px}}
@media (max-width:460px){.fcols{grid-template-columns:1fr}}
.fcols h3{font-family:var(--body);font-size:14px;font-weight:600;color:var(--text-primary);
  margin-bottom:18px;letter-spacing:.01em}
.fcols ul{display:grid;gap:13px}
.fcols a{color:#7C88AC;text-decoration:none;font-size:14px;
  transition:color .3s var(--ease)}
.fcols a:hover,.fcols a:focus-visible{color:var(--accent)}
.fbot{margin-top:clamp(42px,4.6vw,68px);padding-top:26px;
  border-top:1px solid rgba(96,112,158,.16)}
.fbot p{font-size:12.5px;color:#5C6989;line-height:1.9;max-width:78ch}
.fbot .cr{font-family:var(--mono);letter-spacing:.1em;color:#8E9BC0;margin-bottom:5px}


/* ---- dải đầu trang shop: khung hình cuối của video, nối tiếp thế giới trang 1 ---- */
.shead{position:relative;z-index:2;min-height:min(64vh,580px);display:grid;align-items:end;
  padding:calc(72px + clamp(44px,6vw,92px)) var(--gut) clamp(40px,5.2vw,72px);overflow:hidden}
.shead::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url('hero-ending.jpg') center/cover no-repeat;transform:scale(1.04)}
.shead::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(rgba(5,12,30,.40) 0%,rgba(5,12,30,.56) 44%,rgba(5,12,30,.90) 86%,var(--canvas) 100%)}
.shead-in{max-width:1200px;margin:0 auto;width:100%;text-align:center;
  display:grid;justify-items:center;gap:clamp(12px,1.5vw,18px)}
.smark{font-family:var(--display);font-weight:700;letter-spacing:.2em;
  font-size:clamp(19px,2.5vw,31px);text-shadow:var(--tshadow)}
.smark b{color:var(--accent);font-weight:700}
.stag{font-family:var(--display);font-weight:500;letter-spacing:-.018em;line-height:1.15;
  font-size:clamp(27px,4.5vw,55px);text-shadow:var(--tshadow);max-width:20ch}
.ssub{color:var(--text-secondary);font-size:clamp(14px,1.4vw,17.5px);text-shadow:var(--tshadow)}
.srow{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;margin-top:clamp(10px,1.4vw,18px)}
.srow .btn{min-width:172px}
@media (max-width:420px){.srow{width:min(300px,100%)}.srow .btn{min-width:0;width:100%}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .in-up{opacity:1;transform:none}
  .rail{opacity:1}
  .shead::before{transform:none}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---- dải chữ chạy dưới header ---- */
.mq{position:relative;z-index:3;overflow:hidden;border-bottom:1px solid rgba(30,44,78,.9);
  background:linear-gradient(90deg,rgba(12,23,48,.94),rgba(20,33,64,.94),rgba(12,23,48,.94));
  margin-top:72px}
.mq-t{display:flex;width:max-content;animation:mqrun 38s linear infinite}
.mq-t span{display:block;padding:9px clamp(24px,2.8vw,44px);white-space:nowrap;
  font-size:11.5px;font-style:italic;letter-spacing:.01em;color:var(--text-secondary)}
.mq-t b{color:var(--accent);font-weight:600;font-style:italic}
@keyframes mqrun{to{transform:translateX(-50%)}}
.mq:hover .mq-t{animation-play-state:paused}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- đầu các trang con: nhẹ, không tranh chỗ với nội dung ---- */
.phd{position:relative;z-index:2;padding:clamp(52px,6vw,96px) var(--gut) clamp(20px,2.4vw,34px)}
.phd .wrap{display:grid;gap:14px}
.phd h1{font-family:var(--display);font-weight:500;letter-spacing:-.022em;line-height:1.1;
  font-size:clamp(30px,4.6vw,58px);max-width:18ch}
.phd .dek{margin-top:2px}

/* ---- con số: đồng hồ chạy ở trên, bốn ô ở dưới ---- */
.statbox{position:relative;overflow:hidden;border-radius:20px;
  border:1px solid rgba(85,98,143,.34);background:rgba(9,18,42,.62);backdrop-filter:blur(8px)}
.statbox::before{content:"";position:absolute;left:50%;top:-70%;width:120%;height:150%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 40% 46% at 50% 50%,rgba(207,196,255,.14),transparent 68%)}
.statbox>*{position:relative}
.uptime{padding:clamp(26px,3.2vw,42px) clamp(20px,2.6vw,38px) clamp(22px,2.6vw,34px);
  text-align:center;border-bottom:1px solid rgba(85,98,143,.3)}
.up-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:clamp(14px,1.6vw,20px)}
.up-v{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(10px,1.8vw,30px)}
.up-v>span{display:grid;justify-items:center;gap:5px;min-width:clamp(62px,7vw,96px)}
.up-v b{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1;
  font-size:clamp(28px,4.4vw,54px);color:var(--accent);font-variant-numeric:tabular-nums;
  text-shadow:0 0 34px rgba(207,196,255,.34)}
.up-v i{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-secondary)}
.up-v>span+span{position:relative}
.up-v>span+span::before{content:"";position:absolute;left:calc(-1*clamp(5px,.9vw,15px));top:12%;
  bottom:34%;width:1px;background:linear-gradient(rgba(85,98,143,0),rgba(85,98,143,.55),rgba(85,98,143,0))}
.stat4{display:grid;grid-template-columns:repeat(4,1fr)}
.stat4 li{padding:clamp(22px,2.6vw,34px) clamp(16px,2vw,28px);position:relative}
.stat4 li+li::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;
  background:linear-gradient(rgba(85,98,143,0),rgba(85,98,143,.5),rgba(85,98,143,0))}
.stat4 .n{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1;
  font-size:clamp(26px,3.6vw,46px);margin-bottom:11px;font-variant-numeric:tabular-nums}
.stat4 .l{font-size:clamp(12.5px,1.15vw,14px);color:var(--text-secondary);line-height:1.45}
@media (max-width:860px){
  .stat4{grid-template-columns:repeat(2,1fr)}
  .stat4 li:nth-child(odd)::before{display:none}
  .stat4 li:nth-child(n+3)::after{content:"";position:absolute;left:6%;right:6%;top:0;height:1px;
    background:linear-gradient(90deg,rgba(85,98,143,0),rgba(85,98,143,.45),rgba(85,98,143,0))}
}
@media (max-width:430px){.up-v{gap:8px}.up-v>span{min-width:58px}.up-v>span+span::before{display:none}}

/* ---- khối chốt cuối trang chủ ---- */
.endcta{text-align:center;display:grid;justify-items:center;gap:clamp(18px,2.2vw,28px)}
.endcta h2{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.14;
  font-size:clamp(25px,3.8vw,48px);max-width:20ch}
.endcta .dek{margin-top:0;text-align:center}

/* ---- trang liên hệ ---- */
.ways{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);
  margin-top:clamp(28px,3.4vw,46px)}
@media (max-width:820px){.ways{grid-template-columns:1fr}}
.way{display:grid;gap:9px;padding:clamp(22px,2.6vw,32px);text-decoration:none;
  transition:transform .4s var(--ease),border-color .4s var(--ease)}
.way:hover{transform:translateY(-3px);border-color:rgba(207,196,255,.42)}
.way .wtag{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan)}
.way h3{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.9vw,23px);
  letter-spacing:-.012em}
.way p{color:var(--text-secondary);font-size:14px}
.way .go{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-secondary);display:flex;align-items:center;gap:7px;margin-top:4px;
  transition:color .35s var(--ease),gap .35s var(--ease)}
.way:hover .go{color:var(--accent);gap:11px}
.hours{margin-top:clamp(26px,3vw,40px);padding:clamp(20px,2.2vw,28px);border-radius:16px;
  border:1px solid rgba(85,98,143,.34);background:rgba(9,18,42,.5);
  display:flex;flex-wrap:wrap;gap:10px 34px;align-items:baseline}
.hours dt{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan)}
.hours dd{margin:0;font-size:14.5px;color:var(--text-secondary)}

/* ---- chân trang: ba cột chữ, rồi thanh bản quyền ---- */
footer{position:relative;z-index:2;padding:clamp(48px,5.4vw,84px) var(--gut) clamp(26px,3vw,40px);
  border-top:1px solid rgba(30,44,78,.95);background:rgba(4,9,24,.72)}
.f3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,72px)}
@media (max-width:700px){.f3{grid-template-columns:1fr;gap:30px}}
.f3 h3{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-secondary);font-weight:500;margin-bottom:15px;opacity:.72}
.f3 ul{display:grid;gap:11px}
.f3 a{text-decoration:none;font-size:14.5px;color:#7F8BAD;
  transition:color .3s var(--ease)}
.f3 a:hover,.f3 a:focus-visible{color:var(--text-primary)}
.fbot{margin-top:clamp(34px,4vw,58px);padding-top:clamp(18px,2vw,26px);
  border-top:1px solid rgba(85,98,143,.26);
  display:flex;justify-content:space-between;gap:12px 26px;flex-wrap:wrap;align-items:baseline}
.fbot p{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#77839F}

/* ================= KHUNG HERO MANGA: phông vẽ bằng CSS, agent là ảnh tách nền =========
   Không dùng ảnh nền do máy vẽ: tia tốc độ và chấm halftone là hình học thuần,
   vẽ bằng gradient thì sắc nét ở mọi màn hình, đúng màu thương hiệu, nặng vài KB. */
.mhero{position:relative;z-index:2;overflow:hidden;isolation:isolate;
  background:#03060E;border-bottom:1px solid rgba(30,44,78,.9);
  min-height:clamp(430px,58vh,620px);display:grid;align-items:center;
  /* Mep trai cua vung logo, dung dung phep toan sinh ra mep phai cua chu:
     le trai cua khung noi dung 1200px can giua, cong be rong khoi chu
     min(890px,71%) bam theo co chu clamp, cong 34px tho. Nho vay logo va chu
     khong bao gio truot len nhau du keo cua so den dau. */
  --zl:calc(max(0px,(100% - 1200px) / 2) + min(890px,71%) + 34px)}
.mhero-art{position:absolute;inset:0;z-index:0;pointer-events:none}
.mhero-art>span{position:absolute;inset:0;display:block}
/* quầng tím sau lưng agent */
.m-glow{background:radial-gradient(circle at var(--cx,72%) 52%,
  rgba(207,196,255,.72) 0%,rgba(184,168,255,.34) 18%,rgba(150,128,230,.16) 34%,
  rgba(110,92,190,.06) 52%,transparent 70%)}
/* tia tốc độ: nan quạt conic, che bớt tâm và rìa cho mềm */
@property --rayang{syntax:'<angle>';initial-value:0deg;inherits:false}
.m-rays{inset:0;
  background:repeating-conic-gradient(from var(--rayang) at var(--cx,72%) 50%,
    rgba(255,255,255,.30) 0deg .8deg,transparent .8deg 4deg);
  -webkit-mask:radial-gradient(circle at var(--cx,72%) 50%,transparent 6%,#000 19%,#000 74%,transparent 106%);
          mask:radial-gradient(circle at var(--cx,72%) 50%,transparent 6%,#000 19%,#000 74%,transparent 106%);
  animation:rayspin 90s linear infinite}
@keyframes rayspin{to{--rayang:360deg}}
/* mảng đen đổ từ trái sang, dọn chỗ cho chữ */
.m-fade{background:linear-gradient(90deg,#03060E 0%,#03060E 24%,rgba(3,6,14,.9) 40%,
  rgba(3,6,14,.42) 56%,rgba(3,6,14,.06) 72%,transparent 82%)}
/* logo sản phẩm thật, rải trong quầng sáng sau lưng agent */
.mhero-art>.m-logos{inset:0 0 0 var(--zl)}
.m-logos i{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;
  width:var(--s,58px);height:var(--s,58px);display:block;
  animation:logofloat 11s var(--ease-soft) infinite;animation-delay:var(--d,0s)}
.m-logos img{width:100%;height:100%;object-fit:contain;opacity:.96;
  filter:drop-shadow(0 0 18px rgba(207,196,255,.55)) drop-shadow(0 5px 12px rgba(0,0,0,.7))}
@keyframes logofloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
/* agent: đúng bản tách nền, không phóng to quá 1.6 lần bản gốc cho khỏi vỡ nét */
.mhero-agent{position:absolute;z-index:1;right:clamp(6px,4vw,86px);bottom:0;
  width:auto;height:clamp(230px,38vh,400px);max-height:100%;
  filter:drop-shadow(0 0 34px rgba(207,196,255,.4)) drop-shadow(0 14px 30px rgba(0,0,0,.7));
  pointer-events:none;user-select:none}
.mhero-copy{position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%;
  padding:clamp(84px,9vw,120px) var(--gut) clamp(40px,5vw,64px)}
.mh-k{font-family:var(--mono);font-size:clamp(9.5px,1vw,11.5px);letter-spacing:.26em;
  text-transform:uppercase;color:var(--text-secondary);margin-bottom:clamp(16px,2vw,24px)}
.mhero h1{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.03;
  font-size:clamp(30px,5.4vw,68px);max-width:13ch}
.mhero h1 span{color:#6C7899;display:block}
.mh-d{margin-top:clamp(16px,2vw,26px);max-width:34ch;color:var(--text-secondary);
  font-size:clamp(14px,1.35vw,17px)}
.mh-row{display:flex;gap:13px;flex-wrap:wrap;margin-top:clamp(22px,2.6vw,34px)}
@media (max-width:900px){
  .mhero{min-height:0}
  .mhero-copy{padding-bottom:clamp(200px,44vw,300px)}
  .mhero-agent{height:clamp(210px,42vw,300px);right:-6%;opacity:.9}
  .mhero h1{max-width:none}
  /* Xep doc: chu chiem tron be ngang, nen vung logo bo xuong dai duoi cung
     voi agent thay vi nam ben phai chu. */
  .mhero-art>.m-logos{inset:auto 0 0 auto;width:min(74%,420px);height:clamp(200px,44vw,300px)}
  .m-logos i:nth-child(n+4){display:none}
}
@media (prefers-reduced-motion:reduce){.m-rays,.m-logos i,.card::before{animation:none}}

/* dấu hiệu agent nhỏ cạnh tên shop trên thanh nav */
.wm{gap:12px}
.wm .face{width:auto;height:clamp(42px,4.6vw,58px);flex:none;
  border:0;border-radius:0;background:none;object-fit:contain;
  filter:drop-shadow(0 0 13px rgba(207,196,255,.45));
  transition:filter .35s var(--ease),transform .35s var(--ease)}
.wm:hover .face{filter:drop-shadow(0 0 20px rgba(207,196,255,.75));transform:translateY(-1px)}
.wm .dot{display:none}