/* =========================================================================
   2DM GROUP — Landing page "Kinh doanh 1 người bằng AI"
   Theme: dark premium, gold/orange accents
   ========================================================================= */

:root{
  --bg:#020915; --bg2:#061222;
  --panel:rgba(9,26,46,.84);
  --gold:#f3b53e; --gold-soft:#f9d889; --orange:#ff8c1a;
  --text:#f7f9fc; --muted:#aab6c8;
  --line:rgba(243,181,62,.28);
  --radius:20px;
  --shadow:0 22px 80px rgba(0,0,0,.38);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth; color-scheme:dark}
::selection{background:rgba(243,181,62,.28); color:#fff}
::-webkit-scrollbar{width:12px; height:12px}
::-webkit-scrollbar-track{background:#040d1a}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold),var(--orange)); border-radius:8px; border:3px solid #040d1a}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
body{
  margin:0; min-width:0;
  background:
    radial-gradient(circle at 10% 10%, rgba(22,96,141,.18), transparent 28%),
    radial-gradient(circle at 90% 12%, rgba(239,154,29,.12), transparent 24%),
    var(--bg);
  color:var(--text);
  font-family:"Be Vietnam Pro", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto}

/* --- Keyboard focus visibility (a11y) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.interest input:focus-visible + span{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:8px;
}
.form input:focus-visible,
.form textarea:focus-visible{outline-offset:0}

/* --- Skip link --- */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  padding:10px 16px; border-radius:10px; font-weight:800;
  color:#07101c; background:linear-gradient(135deg,var(--gold),var(--orange));
  transition:top .2s var(--ease);
}
.skip-link:focus{top:12px}
.container{width:min(1180px, calc(100% - 40px)); margin:auto}
.section{padding:60px 0}

/* --- Scroll progress bar --- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg, var(--gold), var(--orange));
  z-index:100; transition:width .1s linear;
}

/* --- Scroll reveal --- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}

.dark{
  background:linear-gradient(180deg, rgba(6,18,34,.82), rgba(3,12,25,.94));
  border-block:1px solid rgba(255,255,255,.05);
}

/* --- Header --- */
.site-header{
  position:sticky; top:0; z-index:50; height:74px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 max(24px, calc((100vw - 1180px)/2));
  background:rgba(2,9,21,.72); backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background .3s, height .3s, border-color .3s;
}
.site-header.scrolled{height:62px; background:rgba(2,9,21,.94); border-color:var(--line)}
.brand{display:flex; gap:6px; align-items:baseline}
.brand b{font-size:24px; color:var(--gold)}
.brand small{font-weight:900; letter-spacing:.04em}
.site-header nav{display:flex; gap:26px; color:var(--muted); font-size:14px; font-weight:700}
.site-header nav a{position:relative; transition:color .2s}
.site-header nav a:after{content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--gold); transition:width .25s var(--ease)}
.site-header nav a:hover{color:var(--gold)}
.site-header nav a:hover:after{width:100%}
.header-cta{display:flex; gap:10px; align-items:center; flex:0 0 auto}
.header-cta .btn{white-space:nowrap}
.rt-short{display:none}
.btn.compact.call{color:#fff; background:rgba(255,255,255,.05); border:1px solid var(--gold)}
.btn.compact.call:hover{background:rgba(243,181,62,.12)}
.btn.compact.call .ci{margin-right:6px}

/* --- Buttons --- */
.btn{
  display:inline-flex; min-height:52px; padding:0 26px;
  align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:12px;
  font-weight:800; letter-spacing:.01em; cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s, filter .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{color:#07101c; background:linear-gradient(135deg,#ffd46d,var(--gold),var(--orange)); box-shadow:0 14px 35px rgba(243,181,62,.22)}
.btn.primary:hover{box-shadow:0 18px 46px rgba(243,181,62,.36); filter:brightness(1.04)}
.btn.secondary{background:rgba(255,255,255,.04)}
.btn.secondary:hover{background:rgba(255,255,255,.08); border-color:var(--gold)}
.btn.compact{min-height:44px; padding:0 20px; color:#07101c; background:linear-gradient(135deg,var(--gold),var(--orange))}
.btn.full{width:100%}
.btn[disabled]{opacity:.6; cursor:progress; transform:none}

/* --- Hero --- */
.hero{position:relative; overflow:hidden; padding:56px 0 64px}
.hero:before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,#000,transparent 84%);
}
.glow{position:absolute; border-radius:50%; filter:blur(100px); opacity:.28; animation:float 9s ease-in-out infinite}
.g1{width:420px; height:420px; background:#0d75aa; top:80px; left:-180px}
.g2{width:360px; height:360px; background:#c77a10; right:-160px; top:20px; animation-delay:-4.5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-24px)}}
.hero-grid{position:relative; width:min(1720px, calc(100% - 80px)); margin-inline:auto; display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(40px,4vw,72px); align-items:center}
.hero-copy{max-width:none}
.eyebrow{color:var(--gold); font-size:13px; letter-spacing:.18em; font-weight:800; text-transform:uppercase; margin:0 0 16px}
.hero h1{font-size:clamp(40px,3.4vw,64px); line-height:1.04; margin:0; letter-spacing:-.03em; font-weight:900; overflow-wrap:break-word; text-wrap:pretty}
.hero .tagline,.hero .lead{max-width:640px}
.hero h1 span{color:transparent; background:linear-gradient(180deg,#fff0ad,var(--gold),#d47c11); background-clip:text; -webkit-background-clip:text}
.tagline{margin:22px 0 0; color:var(--gold-soft); font-weight:700; font-size:17px}
.lead{color:var(--muted); font-size:18px}
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:28px 0}
.facts div{padding:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); border-radius:14px; transition:border-color .2s, transform .2s}
.facts div:hover{border-color:var(--line); transform:translateY(-2px)}
.facts b,.facts span{display:block}
.facts b{color:var(--gold); font-size:18px}
.facts span{color:var(--muted); font-size:12px}
.actions{display:flex; gap:12px; flex-wrap:wrap}
.note{font-size:13px; color:#7f8ca1}

/* --- Countdown --- */
.countdown{margin:26px 0 6px; padding:18px; border:1px solid var(--line); border-radius:16px; background:rgba(243,181,62,.05)}
.countdown-label{display:block; color:var(--gold-soft); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px}
.countdown-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; text-align:center}
.countdown-grid b{display:block; font-size:34px; font-weight:900; color:var(--gold); line-height:1; font-variant-numeric:tabular-nums}
.countdown-grid span{display:block; font-size:11px; color:var(--muted); margin-top:6px}

/* --- Poster --- */
.poster-wrap{max-width:none}
.poster{padding:7px; border-radius:22px; background:linear-gradient(135deg,rgba(255,213,119,.85),rgba(255,255,255,.05),rgba(255,136,0,.72)); box-shadow:var(--shadow)}
.poster img{display:block; width:100%; height:auto; border-radius:17px}
.poster-note{margin:16px 12px 0; padding:15px 18px; border-left:3px solid var(--gold); background:rgba(255,255,255,.035); color:var(--muted); font-size:13px}
.poster-note span,.poster-note b{display:block}
.poster-note b{color:#fff; margin:3px 0}

/* --- Trust --- */
.trust{border-block:1px solid rgba(255,255,255,.06); background:rgba(7,20,37,.88)}
.trust-grid{min-height:112px; display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:24px}
.trust-grid div{text-align:center}
.trust strong,.trust span{display:block}
.trust strong{color:var(--gold)}
.trust span{color:var(--muted); font-size:12px}
.trust i{font-size:30px; color:var(--gold-soft)}

/* --- Headings --- */
.heading{max-width:820px; margin-bottom:48px}
.heading.center{text-align:center; margin-inline:auto}
h2{font-size:clamp(34px,4vw,54px); line-height:1.12; margin:0 0 18px; letter-spacing:-.035em; font-weight:900}
.heading p:last-child{color:var(--muted); font-size:17px}

/* --- Organizers --- */
.organizers{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.organizer{overflow:hidden; display:grid; grid-template-columns:42% 58%; min-height:500px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,rgba(10,30,52,.96),rgba(3,13,27,.98)); box-shadow:var(--shadow); transition:transform .3s var(--ease), box-shadow .3s}
.organizer:hover{transform:translateY(-4px); box-shadow:0 30px 90px rgba(0,0,0,.5)}
.portrait{position:relative; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(243,181,62,.22)}
.portrait:after{content:""; position:absolute; inset:0; box-shadow:inset -1px 0 0 rgba(243,181,62,.25); pointer-events:none}
.portrait img{width:100%; height:100%; object-fit:cover; object-position:50% 14%; background:#fff; transition:transform .5s var(--ease)}
.organizer:hover .portrait img{transform:scale(1.05)}
/* Ảnh cutout nền trong suốt → đứng nền tối có glow, không vignette cạnh */
.portrait-cutout{background:radial-gradient(120% 80% at 50% 25%, rgba(243,181,62,.12), transparent 62%), linear-gradient(180deg, rgba(14,36,60,.55), rgba(4,14,28,.92))}
.portrait-cutout:after{display:none}
.portrait-cutout img{object-fit:contain; object-position:bottom center}
.organizer-info{padding:38px 30px; display:flex; flex-direction:column; justify-content:center}
.kicker{color:var(--gold); font-size:11px; letter-spacing:.13em; font-weight:800; text-transform:uppercase}
.organizer h3,.trainer h3{font-size:30px; margin:0 0 8px}
.organizer-info>p:not(.kicker){color:var(--muted)}
.topic{margin-top:16px; padding:16px; border:1px solid rgba(243,181,62,.24); border-radius:13px; background:rgba(243,181,62,.05)}
.topic small,.topic strong{display:block}
.topic small{color:var(--muted)}
.topic strong{color:var(--gold-soft); margin-top:5px}

/* --- Pain grid --- */
.two-col{display:grid; grid-template-columns:.8fr 1.2fr; gap:68px}
.pain-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.pain{display:flex; gap:13px; padding:18px; border:1px solid rgba(255,255,255,.07); border-radius:14px; background:rgba(255,255,255,.035); transition:border-color .2s, background .2s, transform .2s}
.pain:hover{border-color:var(--line); background:rgba(243,181,62,.05); transform:translateY(-2px)}
.pain b{color:var(--gold); font-weight:900}
.pain p{margin:0; color:#d6deea}

/* --- Trainers --- */
.trainers{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.trainer{padding:30px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(160deg,rgba(12,34,58,.92),rgba(4,14,28,.98)); min-height:590px; transition:transform .3s var(--ease), box-shadow .3s}
.trainer:hover{transform:translateY(-6px); box-shadow:0 26px 70px rgba(0,0,0,.45)}
.trainer-top{display:flex; justify-content:space-between; align-items:center}
.trainer-num{font-size:36px; color:rgba(255,255,255,.16); font-weight:900}
.avatar{width:62px; height:62px; border-radius:50%; display:grid; place-items:center; color:#07101c; font-size:26px; font-weight:900; background:linear-gradient(135deg,#ffe49c,var(--gold),var(--orange))}
/* --- Trainer card có ảnh --- */
.trainer.has-photo{padding:0; overflow:hidden; display:flex; flex-direction:column}
.trainer-photo{position:relative; height:300px; overflow:hidden; flex:none}
.trainer-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 16%; transition:transform .5s var(--ease)}
.trainer.has-photo:hover .trainer-photo img{transform:scale(1.045)}
.trainer-photo:after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 52%,rgba(4,14,28,.5) 84%,rgba(4,14,28,.96))}
.trainer-photo .trainer-num{position:absolute; top:12px; left:16px; font-size:30px; color:rgba(255,255,255,.9); font-weight:900; text-shadow:0 2px 10px rgba(0,0,0,.65)}
.trainer-body{padding:22px 28px 30px; display:flex; flex-direction:column; flex:1}
.trainer h4{color:var(--gold-soft); font-size:19px; min-height:72px}
.trainer ul,.module ul{list-style:none; padding:0; margin:0}
.trainer li,.module li{position:relative; padding-left:20px; margin:10px 0; color:var(--muted)}
.trainer li:before,.module li:before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--gold)}

/* --- Growth map --- */
.system{background:radial-gradient(circle at center, rgba(25,96,137,.12), transparent 45%)}
.growth-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:15px}
.growth{min-height:230px; padding:24px; border:1px solid rgba(255,255,255,.07); border-radius:18px; background:rgba(255,255,255,.03); transition:border-color .25s, transform .25s, background .25s}
.growth:hover{border-color:var(--line); transform:translateY(-4px); background:rgba(243,181,62,.04)}
.growth>b{color:var(--gold); font-size:20px; font-weight:900}
.growth h3{margin:28px 0 10px}
.growth p{color:var(--muted); font-size:14px}

/* --- Feature band --- */
.feature-band{padding:38px 0; background:linear-gradient(90deg,#071627,#0a1b2d 50%,#071627); border-block:1px solid var(--line)}
.feature-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.feature-grid>div{text-align:center; padding:10px 18px}
.feature-grid i{width:58px; height:58px; display:inline-grid; place-items:center; border:1px solid var(--gold); border-radius:50%; color:var(--gold); font-style:normal; font-weight:900; font-size:20px; transition:transform .25s var(--ease)}
.feature-grid>div:hover i{transform:scale(1.1) rotate(-6deg)}
.feature-grid b,.feature-grid span{display:block}
.feature-grid b{color:var(--gold); margin-top:12px}
.feature-grid span{font-size:12px; color:var(--muted)}

/* --- Modules --- */
.module-list{display:grid; gap:24px}
.module{display:grid; grid-template-columns:155px 1fr; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,rgba(9,27,48,.94),rgba(4,14,28,.98)); transition:box-shadow .3s}
.module:hover{box-shadow:0 24px 70px rgba(0,0,0,.4)}
.module-index{padding:30px 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(180deg,rgba(243,181,62,.14),rgba(243,181,62,.03)); border-right:1px solid var(--line)}
.module-index span{font-size:11px; color:var(--muted); font-weight:900}
.module-index b{font-size:58px; color:var(--gold); line-height:1; margin:12px}
.module-main{padding:36px}
.module-main h3{font-size:31px; margin:4px 0 10px}
.module-summary{color:var(--muted)}
.module-cols{display:grid; grid-template-columns:1.35fr .65fr; gap:28px; margin-top:26px}
.module-cols h4{color:var(--gold-soft)}
.output{padding:22px; border:1px solid rgba(243,181,62,.18); border-radius:15px; background:rgba(243,181,62,.055)}

/* --- Module: màu nổi bật TĂNG DẦN 1 → 3 --- */
.module-list .module{--m:243 181 62; --mi:.16}
.module-list .module:nth-child(1){--m:56 160 224; --mi:.16}   /* xanh dương — nền tảng */
.module-list .module:nth-child(2){--m:243 181 62; --mi:.26}   /* vàng brand — tăng tốc */
.module-list .module:nth-child(3){--m:255 106 26; --mi:.36}   /* cam rực — bứt phá */
.module-list .module{border-color:rgb(var(--m) / .40)}
.module-list .module:nth-child(3){border-color:rgb(var(--m) / .55); box-shadow:0 0 0 1px rgb(var(--m) / .18)}
.module-list .module:hover{box-shadow:0 24px 70px rgb(var(--m) / .22)}
.module-list .module-index{background:linear-gradient(180deg, rgb(var(--m) / var(--mi)), rgb(var(--m) / .03)); border-right-color:rgb(var(--m) / .34)}
.module-list .module-index b{color:rgb(var(--m))}
.module-list .module-cols h4{color:rgb(var(--m))}
.module-list .output{border-color:rgb(var(--m) / .30); background:rgb(var(--m) / .07)}

/* --- Timeline --- */
.timeline{max-width:940px; margin:auto; position:relative}
.timeline:before{content:""; position:absolute; left:119px; top:12px; bottom:12px; width:1px; background:linear-gradient(var(--gold),rgba(243,181,62,.08))}
.timeline-item{display:grid; grid-template-columns:100px 1fr; gap:38px; padding:16px 0; position:relative}
.timeline-item:before{content:""; position:absolute; left:113px; top:29px; width:13px; height:13px; border-radius:50%; background:#071426; border:3px solid var(--gold)}
.timeline-item time{color:var(--gold); font-weight:900; font-size:13px}
.timeline-item div{padding:18px 22px; border:1px solid rgba(255,255,255,.06); border-radius:14px; background:rgba(255,255,255,.035); transition:border-color .2s, transform .2s}
.timeline-item div:hover{border-color:var(--line); transform:translateX(4px)}
.timeline-item.accent div{border-color:rgba(243,181,62,.32); background:rgba(243,181,62,.06)}
.timeline h3{margin:0; font-size:17px}
.timeline p{margin:3px 0 0; color:var(--muted); font-size:13px}

/* --- Results + gift --- */
.result-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px}
.checks{display:grid; gap:10px}
.checks div{display:flex; gap:13px; padding:13px 16px; border-radius:11px; background:rgba(255,255,255,.035)}
.checks b{color:var(--gold)}
.gift{padding:36px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,rgba(14,39,64,.92),rgba(4,14,28,.98))}
.gift ol{padding-left:20px; margin:0}
.gift li{margin:12px 0; color:var(--muted)}
.gift li::marker{color:var(--gold); font-weight:900}

/* --- Tickets / Pricing --- */
.ticket-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start}
.ticket{position:relative; display:flex; flex-direction:column; padding:32px 26px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(160deg,rgba(12,34,58,.92),rgba(4,14,28,.98)); transition:transform .3s var(--ease), box-shadow .3s}
.ticket:hover{transform:translateY(-6px); box-shadow:0 26px 70px rgba(0,0,0,.45)}
.ticket.featured{
  border:1.5px solid transparent;
  background:
    linear-gradient(160deg,rgba(20,44,72,.97),rgba(6,17,32,.99)) padding-box,
    linear-gradient(135deg,#ffe9ad,var(--gold) 45%,var(--orange)) border-box;
  box-shadow:0 28px 72px rgba(243,181,62,.18), inset 0 1px 0 rgba(255,255,255,.07);
  transform:translateY(-8px);
}
.ticket.featured:hover{transform:translateY(-14px)}
.ticket.featured:before{content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(120% 60% at 50% 0,rgba(255,213,119,.14),transparent 60%); pointer-events:none}
.ticket.featured .ticket-price{background:linear-gradient(180deg,#fff0ad,var(--gold),#d47c11); -webkit-background-clip:text; background-clip:text; color:transparent}
.ticket.featured .btn.secondary{border-color:var(--gold)}
@media(max-width:1050px){.ticket.featured{transform:none} .ticket.featured:hover{transform:translateY(-6px)}}
.ticket-badge{position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:5px 16px; border-radius:999px; font-size:12px; font-weight:800; color:#07101c; background:linear-gradient(135deg,var(--gold),var(--orange)); white-space:nowrap}
.ticket h3{margin:0 0 6px; font-size:22px}
.ticket-price{font-size:38px; font-weight:900; color:var(--gold); line-height:1.1; font-variant-numeric:tabular-nums}
.ticket-limit{margin:8px 0 2px; display:inline-block; padding:4px 12px; border-radius:999px; font-size:12.5px; font-weight:800; color:var(--gold-soft); background:rgba(255,136,0,.14); border:1px solid rgba(255,136,0,.35)}
.ticket-note{margin:8px 0 18px; color:var(--muted); font-size:13px}
.ticket ul{list-style:none; padding:0; margin:0 0 24px; flex:1}
.ticket li{position:relative; padding-left:24px; margin:11px 0; color:#d6deea; font-size:14.5px}
.ticket li:before{content:"✓"; position:absolute; left:0; top:0; color:var(--gold); font-weight:900}
.ticket .btn{margin-top:auto}

/* --- Phân cấp VIP → thường (1: VIP Pro sang nhất · 2: VIP · 3: Phổ thông giản dị) --- */
.ticket-grid .ticket:nth-child(1){transform:translateY(-16px); border-width:2px;
  background:linear-gradient(160deg,rgba(30,52,82,.98),rgba(8,20,38,.99)) padding-box,
    linear-gradient(135deg,#fff2b8,#ffd46d,var(--gold),var(--orange)) border-box;
  box-shadow:0 36px 92px rgba(243,181,62,.30), inset 0 1px 0 rgba(255,255,255,.10)}
.ticket-grid .ticket:nth-child(1):hover{transform:translateY(-22px)}
.ticket-grid .ticket:nth-child(1) .ticket-price{font-size:46px}
.ticket-grid .ticket:nth-child(1) .ticket-badge{padding:6px 20px; font-size:13px; box-shadow:0 8px 22px rgba(243,181,62,.4)}
.ticket-grid .ticket:nth-child(2){transform:translateY(-6px); box-shadow:0 22px 56px rgba(243,181,62,.14)}
.ticket-grid .ticket:nth-child(3){background:linear-gradient(160deg,rgba(16,26,42,.92),rgba(6,14,26,.98)); border-color:rgba(255,255,255,.12)}
.ticket-grid .ticket:nth-child(3) .ticket-price{background:none; -webkit-text-fill-color:initial; color:#c7d2e0}
.ticket-grid .ticket:nth-child(3) li:before{color:#8ea2b8}
@media(max-width:1050px){ .ticket-grid .ticket:nth-child(1),.ticket-grid .ticket:nth-child(2){transform:none} .ticket-grid .ticket:nth-child(1):hover,.ticket-grid .ticket:nth-child(2):hover{transform:translateY(-6px)} }

/* --- Registration --- */
.registration{background:linear-gradient(180deg,rgba(6,18,34,.65),rgba(2,9,21,.98))}
.registration-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:44px}
.details{margin-top:28px; border:1px solid var(--line); border-radius:17px; overflow:hidden}
.details div{display:flex; justify-content:space-between; gap:18px; padding:15px 18px; border-bottom:1px solid rgba(255,255,255,.06)}
.details div:last-child{border-bottom:0}
.details span{color:var(--muted)}
.form{padding:30px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(8,25,44,.94); box-shadow:var(--shadow)}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.form label>span,.form legend{display:block; color:#dce4ef; font-size:13px; font-weight:700; margin-bottom:8px}
.form input,.form textarea{width:100%; min-width:0; color:#fff; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1); border-radius:11px; padding:13px 14px; outline:none; font-family:inherit; font-size:15px; transition:border-color .2s, box-shadow .2s}
.form,.form-grid,.registration-grid,.form fieldset{min-width:0}
.form input:focus,.form textarea:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(243,181,62,.15)}
.form input.invalid,.form textarea.invalid{border-color:#e0645a; box-shadow:0 0 0 3px rgba(224,100,90,.15)}
.form>label,.form fieldset{display:block; margin-top:16px}
.form fieldset{border:0; padding:0}
.interests{display:flex; flex-wrap:wrap; gap:9px}
.interest input{position:absolute; opacity:0}
.interest span{display:inline-block; padding:9px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:var(--muted)!important; cursor:pointer; transition:.2s}
.interest span:hover{border-color:var(--line)}
.interest input:checked+span{border-color:var(--gold); background:rgba(243,181,62,.13); color:var(--gold-soft)!important}
.interest input:focus-visible+span{outline:2px solid var(--gold); outline-offset:2px}
.consent{display:flex!important; gap:11px; align-items:flex-start}
.consent input{width:18px; height:18px; margin-top:3px}
.consent span{margin:0!important; color:var(--muted)!important}
.form .btn{margin-top:20px; border:0}
.form-message{margin:14px 0 0; padding:12px; border-radius:10px; display:none}
.form-message.show{display:block}
.form-message.success{background:rgba(31,167,99,.12); color:#8ee3b5}
.form-message.error{background:rgba(220,72,72,.1); color:#ffb2b2}
.form-message.info{background:rgba(243,181,62,.1); color:var(--gold-soft)}

/* --- Ticket selector trong form --- */
.ticket-select{border:0; padding:0; margin:0 0 4px}
.ticket-radios{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.ticket-radio{position:relative; cursor:pointer}
.ticket-radio input{position:absolute; opacity:0; inset:0}
.ticket-radio span{display:flex; flex-direction:column; gap:3px; padding:12px 10px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(255,255,255,.04); transition:.2s; text-align:center}
.ticket-radio b{font-size:14px; color:#fff}
.ticket-radio i{font-style:normal; font-size:13px; color:var(--gold); font-weight:800}
.ticket-radio:hover span{border-color:var(--line)}
.ticket-radio input:checked+span{border-color:var(--gold); background:rgba(243,181,62,.14); box-shadow:0 0 0 2px rgba(243,181,62,.25) inset}
.ticket-radio input:focus-visible+span{outline:3px solid var(--gold); outline-offset:2px}

/* --- Khối hóa đơn VAT (ẩn/hiện) --- */
.invoice-toggle{margin-top:16px !important}
.invoice-fields{margin-top:12px; padding:16px; border:1px dashed var(--line); border-radius:13px; background:rgba(243,181,62,.04); display:grid; gap:14px}
.invoice-fields .form-grid{margin:0}

/* --- Panel thanh toán QR --- */
.pay-panel{padding:30px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(8,25,44,.96); box-shadow:var(--shadow)}
.pay-back{background:none; border:0; color:var(--muted); cursor:pointer; font-family:inherit; font-size:13px; padding:0 0 12px; font-weight:700}
.pay-back:hover{color:var(--gold)}
.pay-panel h3{margin:0 0 6px; font-size:24px}
.pay-sub{color:var(--muted); font-size:14px; margin:0 0 20px}
.pay-body{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start}
.pay-qr{padding:8px; background:#fff; border-radius:14px; line-height:0}
.pay-qr img{width:220px; height:220px; border-radius:8px}
.pay-info{display:grid; gap:0; border:1px solid var(--line); border-radius:13px; overflow:hidden; align-self:start}
.pay-info div{display:flex; justify-content:space-between; gap:14px; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.06); font-size:14px}
.pay-info div:last-child{border-bottom:0}
.pay-info span{color:var(--muted)}
.pay-info b{color:#fff; text-align:right; word-break:break-word}
.pay-info b.pay-amount{color:var(--gold); font-size:17px}
.pay-info b.pay-code{color:var(--gold-soft); font-family:"JetBrains Mono",monospace; letter-spacing:.03em; background:rgba(243,181,62,.12); padding:2px 8px; border-radius:6px}
.pay-status{margin:18px 0 0; padding:12px 14px; border-radius:10px; background:rgba(243,181,62,.1); color:var(--gold-soft); font-weight:700; font-size:14px}
.pay-note{margin:10px 0 0; font-size:12px; color:#7f8ca1}
.pay-policy{margin:14px 0 0; padding:12px 14px; border-radius:10px; font-size:13px; line-height:1.6; color:#ffd9b0; background:rgba(220,72,72,.1); border:1px solid rgba(255,136,0,.3)}
.pay-policy b{color:#ffcf8a}
.ticket-policy{max-width:840px; margin:26px auto 0; text-align:center; font-size:13.5px; line-height:1.7; color:var(--muted); padding:14px 18px; border:1px solid rgba(255,136,0,.28); border-radius:12px; background:rgba(255,136,0,.06)}
.ticket-policy b{color:var(--gold-soft)}

/* --- Panel thành công --- */
.success-panel{padding:44px 30px; border:1px solid rgba(31,167,99,.4); border-radius:var(--radius); background:linear-gradient(160deg,rgba(16,60,40,.5),rgba(8,25,44,.96)); text-align:center; box-shadow:var(--shadow)}
.success-check{width:74px; height:74px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; font-size:38px; font-weight:900; color:#08120c; background:linear-gradient(135deg,#7ff0b0,#22c55e)}
.success-panel h3{margin:0 0 10px; font-size:28px}
.success-panel p{color:var(--muted); margin:0 auto 20px; max-width:420px}

@media(max-width:560px){
  .ticket-radios{grid-template-columns:1fr}
  .pay-body{grid-template-columns:1fr; justify-items:center; text-align:center}
  .pay-info{width:100%}
}

/* --- Kế hoạch — dải nhiều hàng thẻ bo góc chạy so le --- */
.plan-marquee{position:relative; overflow:hidden; padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.plan-rows{display:flex; flex-direction:column; gap:14px}
.plan-row{overflow:hidden}
.plan-row-track{display:flex; gap:14px; width:max-content; animation:plan-scroll 68s linear infinite; will-change:transform}
.plan-row-track.rev{animation-name:plan-scroll-rev}
.plan-row:nth-child(2) .plan-row-track{animation-duration:84s}
.plan-row:nth-child(3) .plan-row-track{animation-duration:74s}
.plan-marquee:hover .plan-row-track{animation-play-state:paused}
.plan-slide{height:196px; width:auto; flex:none; display:block; object-fit:cover;
  border-radius:18px; border:1px solid rgba(255,255,255,.09); background:#040d1a;
  box-shadow:0 14px 30px rgba(0,0,0,.4)}
@keyframes plan-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@keyframes plan-scroll-rev{from{transform:translateX(-50%)} to{transform:translateX(0)}}
@media(max-width:640px){ .plan-rows{gap:10px} .plan-slide{height:118px; border-radius:14px} .plan-row-track{animation-duration:52s} }
@media(prefers-reduced-motion:reduce){ .plan-row-track{animation:none} .plan-row{overflow-x:auto} }

/* --- FAQ --- */
.faq-grid{display:grid; grid-template-columns:.7fr 1.3fr; gap:60px}
.faq-list{display:grid; gap:10px}
.faq{border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.03); overflow:hidden; transition:border-color .2s}
.faq button{width:100%; display:flex; justify-content:space-between; gap:16px; padding:18px 20px; border:0; background:transparent; color:#fff; font-weight:700; text-align:left; cursor:pointer; font-family:inherit; font-size:16px}
.faq p{max-height:0; overflow:hidden; margin:0; padding:0 20px; color:var(--muted); transition:max-height .3s var(--ease), padding .3s var(--ease)}
.faq.open{border-color:rgba(243,181,62,.3)}
.faq.open p{max-height:320px; padding:0 20px 20px}
.faq .plus{color:var(--gold); font-size:22px; transition:transform .25s}
.faq.open .plus{transform:rotate(180deg)}

/* --- Final CTA --- */
.final-cta{padding:92px 0; text-align:center; background:radial-gradient(circle at 50% 100%, rgba(243,181,62,.2), transparent 35%), linear-gradient(180deg,#071426,#020915); border-top:1px solid var(--line)}
.final-cta .container{max-width:920px}
.final-cta p:not(.eyebrow){color:var(--muted); font-size:18px}

/* --- Footer --- */
/* --- Footer premium --- */
.site-footer{color:var(--muted); font-size:14px; border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(6,16,30,.55), rgba(2,8,18,.98))}
.footer-cta{border-bottom:1px solid rgba(255,255,255,.06); background:radial-gradient(120% 150% at 50% 0, rgba(243,181,62,.10), transparent 60%)}
.footer-cta-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:34px 0}
.footer-cta-inner .eyebrow{margin:0}
.footer-cta-inner h3{margin:4px 0 0; font-size:clamp(20px,2.4vw,28px); color:#fff; letter-spacing:-.02em}

.footer-main{display:grid; grid-template-columns:1.7fr 1fr 1.15fr 1fr; gap:28px 44px; padding:48px 0 36px; align-items:start}
.footer-col h4{color:#fff; font-size:14px; margin:0 0 18px; font-weight:800; letter-spacing:.02em; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand .brand{margin:0 0 16px}
.footer-pill{display:flex; align-items:center; margin-top:8px; padding:9px 16px; border:1px solid var(--line); border-radius:999px; color:var(--gold-soft); font-weight:700; font-size:13.5px; transition:.2s}
.footer-pill:hover{border-color:var(--gold); background:rgba(243,181,62,.1); color:var(--gold)}
.footer-col .footer-pill{width:fit-content}
.footer-col a{display:block; color:var(--muted); padding:5px 0; transition:color .2s, padding-left .2s}
.footer-col a:hover{color:var(--gold); padding-left:4px}
.footer-brand .brand{margin-bottom:14px}
.footer-brand .brand b{font-size:26px; color:var(--gold)}
.footer-brand>p{color:var(--muted); max-width:38ch; margin:0 0 16px; line-height:1.7}
.footer-contact a{display:inline-flex; align-items:center; gap:6px; color:var(--gold-soft); font-weight:700; margin-right:18px}
.footer-contact a:hover{color:var(--gold)}
.footer-note-col{color:var(--muted); margin:0 0 16px; line-height:1.7}

.footer-info div{display:flex; flex-direction:column; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.05)}
.footer-info div:last-child{border-bottom:0}
.footer-info span{color:var(--muted); font-size:12px}
.footer-info b{color:#e7edf5; font-weight:700; margin-top:2px}

.footer-partners{padding:26px 0; border-top:1px solid rgba(255,255,255,.06); display:flex; flex-wrap:wrap; align-items:center; gap:16px 34px}
.footer-partners-label{color:var(--muted); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700}
.partner-logos{display:flex; flex-wrap:wrap; align-items:center; gap:20px 44px}
.partner-logos a{display:inline-flex; align-items:center}
.partner-logos img{height:60px; width:auto; opacity:.92; transition:opacity .2s var(--ease), transform .2s var(--ease)}
.partner-logos a:hover img{opacity:1; transform:translateY(-3px)}

.footer-bottom{border-top:1px solid rgba(255,255,255,.06); padding:18px 0}
.footer-bottom-inner{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12.5px; color:#7f8ca1}

@media(max-width:900px){
  .footer-main{grid-template-columns:1fr 1fr; gap:32px}
  .footer-cta-inner{flex-direction:column; align-items:flex-start}
}
@media(max-width:560px){
  .footer-main{grid-template-columns:1fr; gap:26px}
  .footer-bottom-inner{flex-direction:column; text-align:center; justify-content:center}
  .partner-logos img{height:48px}
}

/* --- Nút liên hệ nổi (FAB) --- */
.fab-contact{position:fixed; right:16px; bottom:16px; z-index:95; display:flex; flex-direction:column; align-items:flex-end; gap:10px}
.fab-btn{display:inline-flex; align-items:center; gap:6px; padding:12px 20px; border:0; border-radius:999px; cursor:pointer; font-family:inherit; font-weight:800; font-size:15px; color:#07101c; background:linear-gradient(135deg,#ffd46d,var(--gold),var(--orange)); box-shadow:0 12px 30px rgba(243,181,62,.35); transition:filter .2s, transform .2s}
.fab-btn:hover{filter:brightness(1.05); transform:translateY(-2px)}
.fab-menu{display:flex; flex-direction:column; gap:8px}
.fab-menu a{display:flex; align-items:center; gap:8px; padding:11px 16px; border-radius:12px; background:rgba(8,25,44,.98); border:1px solid var(--line); color:#fff; font-weight:700; font-size:14px; box-shadow:var(--shadow); white-space:nowrap}
.fab-menu a:hover{border-color:var(--gold); color:var(--gold-soft)}

/* --- Mobile CTA --- */
.mobile-bar{display:none}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media(max-width:1050px){
  .hero-grid,.two-col,.registration-grid{grid-template-columns:1fr}
  .hero-grid{width:min(1180px, calc(100% - 40px)); gap:30px}
  .organizer{grid-template-columns:38% 62%}
  .trainers{grid-template-columns:1fr}
  .trainer{min-height:auto}
  .growth-grid{grid-template-columns:repeat(2,1fr)}
  .module-cols{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr; gap:30px}
}
@media(max-width:800px){
  .site-header{height:60px; padding:0 12px}
  .site-header nav{display:none}
  .site-header .brand{flex:0 0 auto}
  .header-cta{gap:7px}
  .header-cta .btn.compact{min-height:38px; padding:0 12px; font-size:13px; border-radius:9px}
  .btn.compact.call .ct{display:none}
  .btn.compact.call .ci{margin-right:0; font-size:16px}
  .rt-long{display:none}
  .rt-short{display:inline}
  .hero{padding:40px 0 52px}
  .container{width:min(100% - 28px,1180px)}
  .hero h1{font-size:clamp(40px,11vw,58px)}
  .facts{grid-template-columns:1fr}
  .actions{flex-direction:column}
  .actions .btn{width:100%}
  .trust-grid{grid-template-columns:1fr; padding:30px 0}
  .trust i{display:none}
  .section{padding:44px 0}
  .organizers,.result-grid,.faq-grid,.ticket-grid{grid-template-columns:1fr}
  .organizer{grid-template-columns:1fr}
  .portrait{height:410px}
  .portrait:after{box-shadow:none}
  .pain-grid{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .module{grid-template-columns:1fr}
  .module-index{flex-direction:row; gap:14px; border-right:0; border-bottom:1px solid var(--line)}
  .module-index b{font-size:38px; margin:0}
  .module-main{padding:26px 20px}
  .module-main h3{font-size:26px}
  .timeline:before{left:7px}
  .timeline-item{grid-template-columns:1fr; gap:8px; padding-left:28px}
  .timeline-item:before{left:0; top:20px}
  .form-grid{grid-template-columns:1fr}
  .footer{grid-template-columns:1fr; text-align:center; gap:16px}
  .footer-contact,.footer>span:last-child{text-align:center}
  /* Trên mobile: gom về MỘT thanh dưới cùng, ẩn nút liên hệ nổi để không che trang */
  body{padding-bottom:84px}
  .fab-contact{display:none}
  .mobile-bar{
    position:fixed; z-index:95; left:12px; right:12px; bottom:12px;
    display:flex; gap:10px; align-items:stretch;
  }
  .mb-call{
    flex:0 0 auto; width:56px; display:flex; align-items:center; justify-content:center;
    font-size:22px; border-radius:13px; text-decoration:none; color:var(--gold);
    background:rgba(8,25,44,.98); border:1px solid var(--gold);
    box-shadow:0 14px 35px rgba(0,0,0,.4);
  }
  .mb-cta{
    flex:1 1 auto; min-height:52px; display:flex; align-items:center; justify-content:center;
    border-radius:13px; font-weight:900; text-decoration:none; color:#06111f;
    background:linear-gradient(135deg,#ffd46d,var(--gold),var(--orange));
    box-shadow:0 14px 35px rgba(0,0,0,.4);
  }
}
@media(max-width:560px){
  .growth-grid,.feature-grid,.countdown-grid{grid-template-columns:repeat(2,1fr)}
  .organizer-info,.trainer,.gift,.form{padding:24px 20px}
  h2{font-size:34px}
}
/* Không có hover thật (cảm ứng) → tắt hiệu ứng nhấc để tránh sticky-hover */
@media(hover:none){
  .btn:hover,.facts div:hover,.organizer:hover,.trainer:hover,.growth:hover,
  .pain:hover,.module:hover,.timeline-item div:hover,.poster:hover{transform:none}
  .organizer:hover .portrait img{transform:none}
  .feature-grid>div:hover i{transform:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important; animation:none!important}
  .reveal{opacity:1; transform:none}
}

/* ===== Banner đầu trang (2 diễn giả) ===== */
.top-banner {
  padding: 16px 0 4px;
}
.top-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 175, 55, 0.20);
}
@media (max-width: 640px) {
  .top-banner {
    padding: 10px 0 2px;
  }
  .top-banner img {
    border-radius: 12px;
  }
}

/* ===== POPUP THU LEAD (quà 30 bí kíp) ===== */
.lead-pop{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px}
.lead-pop[hidden]{display:none}
.lead-pop-mask{position:absolute; inset:0; background:rgba(2,7,15,.82); backdrop-filter:blur(4px)}
.lead-pop-card{position:relative; z-index:1; width:min(760px,100%); display:grid; grid-template-columns:.82fr 1.18fr;
  border-radius:22px; overflow:hidden; border:1px solid rgba(243,181,62,.35);
  background:linear-gradient(160deg,#0a1c30,#05101f); box-shadow:0 40px 120px rgba(0,0,0,.6);
  animation:pop-in .35s var(--ease)}
@keyframes pop-in{from{opacity:0; transform:translateY(24px) scale(.96)} to{opacity:1; transform:none}}
.lead-pop-close{position:absolute; top:12px; right:14px; z-index:3; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.35); color:#fff; font-size:22px; line-height:1; cursor:pointer}
.lead-pop-close:hover{border-color:var(--gold); color:var(--gold)}
.lead-pop-side{position:relative; padding:30px 24px; display:flex; flex-direction:column; justify-content:center; gap:18px;
  background:linear-gradient(160deg,rgba(243,181,62,.16),rgba(255,136,0,.08)); border-right:1px solid rgba(243,181,62,.2)}
.lead-pop-badge{display:flex; align-items:center; gap:12px}
.lead-pop-badge b{font-size:56px; font-weight:900; line-height:.9; color:transparent; background:linear-gradient(180deg,#fff0ad,var(--gold),#d47c11); background-clip:text; -webkit-background-clip:text}
.lead-pop-badge span{font-weight:900; font-size:13px; letter-spacing:.06em; color:var(--gold-soft)}
.lead-pop-side ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.lead-pop-side li{position:relative; padding-left:22px; font-size:13.5px; color:#e7eef7; font-weight:600}
.lead-pop-side li:before{content:"✦"; position:absolute; left:0; color:var(--gold)}
.lead-pop-body{padding:34px 32px 30px}
.lead-pop-tag{color:var(--gold); font-size:11px; letter-spacing:.12em; font-weight:800; text-transform:uppercase; margin:0 0 12px}
.lead-pop-body h3{margin:0 0 10px; font-size:26px; line-height:1.1; font-weight:900; letter-spacing:-.02em}
.lead-pop-body h3 span{color:transparent; background:linear-gradient(180deg,#fff0ad,var(--gold),#d47c11); background-clip:text; -webkit-background-clip:text}
.lead-pop-sub{margin:0 0 20px; color:var(--muted); font-size:14px; line-height:1.55}
.lead-pop-form{display:flex; flex-direction:column; gap:11px}
.lead-pop-form[hidden]{display:none}
.lead-pop-form input{width:100%; min-width:0; padding:13px 15px; border-radius:11px; border:1px solid var(--line);
  background:rgba(255,255,255,.04); color:#fff; font-family:inherit; font-size:15px}
.lead-pop-form input:focus{outline:none; border-color:var(--gold); background:rgba(243,181,62,.06)}
.lead-pop-form .btn{margin-top:4px}
.lead-pop-msg{margin:2px 0 0; font-size:13px; min-height:16px}
.lead-pop-msg.err{color:#ff9a9a}
.lead-pop-done{text-align:center; padding:10px 0}
.lead-pop-check{width:58px; height:58px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center;
  font-size:30px; color:#06111f; font-weight:900; background:linear-gradient(135deg,#ffd46d,var(--gold),var(--orange))}
.lead-pop-done h4{margin:0 0 8px; font-size:22px; color:var(--gold-soft)}
.lead-pop-done p{margin:0 0 18px; color:var(--muted); font-size:14px}
@media(max-width:640px){
  .lead-pop{padding:12px}
  .lead-pop-card{grid-template-columns:1fr; max-height:92vh; overflow:auto}
  .lead-pop-side{flex-direction:row; align-items:center; justify-content:space-between; padding:18px 20px; border-right:0; border-bottom:1px solid rgba(243,181,62,.2)}
  .lead-pop-side ul{display:none}
  .lead-pop-badge b{font-size:44px}
  .lead-pop-body{padding:22px 20px 24px}
  .lead-pop-body h3{font-size:22px}
}