/* E39 – Trang đại lý · mobile (< 900px): frame "mb - main" 375 × --s.
   body = 375 × --s centered, like E39-LANDING; every size = Figma px × --s. */
:root { --s: clamp(0.8px, calc(100vw / 375), 1.3px); }
body { background: #fff; }
.wrap { width: calc(375 * var(--s)); }
main, .hdr, .ft { width: calc(375 * var(--s)); margin-left: auto; margin-right: auto; }

/* header: centered logo, three pills */
.hdr { height: calc(146 * var(--s)); }
.hdr__logo { left: 50%; top: calc(18 * var(--s)); transform: translateX(-50%); }
.hdr__logo img { width: calc(122 * var(--s)); }
.hdr__nav { left: calc(20 * var(--s)); right: calc(20 * var(--s)); top: calc(86 * var(--s)); gap: calc(10 * var(--s)); justify-content: space-between; }
.btn--line, .btn--fill { height: calc(34 * var(--s)); padding: 0 calc(10 * var(--s)); border-radius: calc(8 * var(--s)); font-size: calc(14 * var(--s)); border-width: calc(1.5 * var(--s)); gap: calc(5 * var(--s)); }
.hdr__nav .btn--home { width: calc(95 * var(--s)); margin-right: 0; }
.hdr__nav .btn--line:not(.btn--home) { width: calc(100 * var(--s)); }
.hdr__nav .btn--fill { width: calc(120 * var(--s)); padding: 0; }
.btn--home img { width: calc(13 * var(--s)); }

/* hero */
.hero { height: calc(750 * var(--s)); }
.hero__img { width: calc(375 * var(--s)); margin-left: calc(-187.5 * var(--s)); }

/* marquee */
.marquee { width: calc(335 * var(--s)); height: calc(32 * var(--s)); margin-top: calc(5 * var(--s)); padding: 0 calc(10 * var(--s)); border-radius: calc(8 * var(--s)); border-width: 1px; }
.marquee__icon { width: calc(22 * var(--s)); margin-right: calc(8 * var(--s)); }
.marquee__text { font-size: calc(11.2 * var(--s)); animation-duration: 22s; }

/* intro */
.intro { margin-top: calc(24 * var(--s)); padding: 0 calc(20 * var(--s)); }
.intro__h { font-size: calc(17 * var(--s)); line-height: calc(24 * var(--s)); }
.intro__p { width: auto; margin-top: calc(14 * var(--s)); font-family: var(--font); font-size: calc(14 * var(--s)); line-height: calc(24 * var(--s)); font-weight: 400; text-align: left; }
.mb-hide { display: none; } .mb-br { display: inline; }

/* perks: podium raster then four stacked cards */
.perks { height: auto; margin-top: calc(16 * var(--s)); padding-top: calc(360 * var(--s)); padding-bottom: calc(2 * var(--s)); }
.perks__bg { display: none; }
.perks__bg--mb { display: block; width: calc(375 * var(--s)); }
.perks__in { height: auto; padding: 0 calc(20 * var(--s)); }
.perk { position: relative; left: auto !important; right: auto !important; top: auto !important; width: 100%; min-height: 0 !important; margin-top: calc(15 * var(--s)); padding: calc(14 * var(--s)) calc(12 * var(--s)) calc(10 * var(--s)) calc(80 * var(--s)); border-radius: calc(16 * var(--s)); border-width: 1px; }
.perk--1 { margin-top: calc(5 * var(--s)); }
.perk--r { padding: calc(14 * var(--s)) calc(80 * var(--s)) calc(10 * var(--s)) calc(12 * var(--s)); }
.perk__icon { left: calc(-22 * var(--s)); top: calc(2 * var(--s)); width: calc(88 * var(--s)); }
.perk--r .perk__icon { right: calc(-10 * var(--s)); }
.perk__h { font-size: calc(19.5 * var(--s)); line-height: calc(24 * var(--s)); padding-bottom: calc(6 * var(--s)); border-bottom-width: 1px; }
.perk p { margin-top: calc(9 * var(--s)); font-size: calc(14 * var(--s)); line-height: calc(15 * var(--s)); }
.bars { height: calc(15 * var(--s)); } .bars i { width: calc(6 * var(--s)); }

/* video */
.video { width: calc(335 * var(--s)); aspect-ratio: 16 / 9; margin: calc(16 * var(--s)) auto 0; border-radius: calc(16 * var(--s)); }

/* section titles: text centred, diamond-and-line ornaments pinned to the bottom corners (Figma mobile) */
.st { display: block; position: relative; font-size: calc(16 * var(--s)); line-height: calc(22 * var(--s)); margin-top: calc(26 * var(--s)); padding: 0 calc(14 * var(--s)) calc(8 * var(--s)); letter-spacing: 0; }
.st > span { display: inline; padding: 0; white-space: normal; }
.st::before, .st::after { content: ""; position: absolute; bottom: 0; width: calc(90 * var(--s)); height: calc(12 * var(--s)); margin: 0; flex: none; background: url("assets/orn-left-mb.svg") left bottom / 100% 100% no-repeat; }
.st::before { left: calc(8 * var(--s)); }
.st::after { left: auto; right: calc(8 * var(--s)); background-image: url("assets/orn-right-mb.svg"); }

/* steps: number column (CSS circles + dotted connector) + icon + text rows */
.steps { position: relative; display: block; margin: calc(10 * var(--s)) 0 0; padding: 0 calc(20 * var(--s)) 0 calc(58 * var(--s)); }
.steps::before { content: ""; position: absolute; left: calc(29 * var(--s)); top: calc(40 * var(--s)); bottom: calc(50 * var(--s)); border-left: calc(2 * var(--s)) dotted #F7A765; }
.step { position: relative; display: flex; align-items: flex-start; height: auto; padding: 0; border: 0; border-radius: 0; background: none; text-align: left; margin-top: calc(14 * var(--s)); min-height: calc(90 * var(--s)); }
.step .tag { display: none; }
.step__num { display: flex; align-items: center; justify-content: center; position: absolute; left: calc(-58 * var(--s)); top: calc(26 * var(--s)); width: calc(30 * var(--s)); height: calc(30 * var(--s)); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFB266, #F58220 60%, #D9650C); color: #fff; font-size: calc(17 * var(--s)); font-weight: 700; box-shadow: 0 calc(2 * var(--s)) calc(5 * var(--s)) rgba(217,101,12,.35); }
.step__pic { width: calc(80 * var(--s)); margin: calc(-2 * var(--s)) 0 0 calc(-4 * var(--s)); flex: 0 0 auto; }
.step__body { flex: 1; padding-left: calc(4 * var(--s)); }
.step__mtag { display: inline-flex; align-items: center; justify-content: center; width: calc(64 * var(--s)); height: calc(20 * var(--s)); background: var(--orange); color: #fff; font-size: calc(10 * var(--s)); font-weight: 700; border-radius: calc(3 * var(--s)); vertical-align: top; margin-right: calc(8 * var(--s)); }
.step__h { display: inline; min-height: 0; margin: 0; font-size: calc(12 * var(--s)); line-height: calc(20 * var(--s)); font-weight: 600; text-align: left; }
.step__h br { display: none; }
.step p { margin-top: calc(6 * var(--s)); font-size: calc(10 * var(--s)); line-height: calc(16 * var(--s)); text-align: left; }

/* letter */
.st--benefit { margin-top: calc(16 * var(--s)); }
.letter { margin: calc(8 * var(--s)) calc(20 * var(--s)) 0; padding: calc(36 * var(--s)) calc(10 * var(--s)) calc(10 * var(--s)); border-radius: calc(16 * var(--s)); border-width: 1px; min-height: 0; }
.tag--lg { height: calc(26 * var(--s)); padding: 0 calc(26 * var(--s)) 0 calc(12 * var(--s)); font-size: calc(16 * var(--s)); border-radius: calc(16 * var(--s)) 0 0 0; clip-path: polygon(0 0, 100% 0, calc(100% - 14 * var(--s)) 100%, 0 100%); }
.letter p { font-size: calc(14 * var(--s)); line-height: calc(24 * var(--s)); }

/* commission table + calculator card */
.st--comm { margin-top: calc(26 * var(--s)); }
.comm { display: block; margin: calc(20 * var(--s)) calc(20 * var(--s)) 0; }
.tbl { border-spacing: calc(4 * var(--s)) calc(4 * var(--s)); margin: calc(-4 * var(--s)); }
.tbl th { height: calc(38 * var(--s)); padding: 0 calc(4 * var(--s)); font-size: calc(11 * var(--s)); border-radius: calc(8 * var(--s)); }
.tbl td { height: calc(30 * var(--s)); padding: 0 calc(4 * var(--s)); font-size: calc(11.5 * var(--s)); border-radius: calc(8 * var(--s)); border-width: 1px; }
.tbl--comm { width: calc(343 * var(--s)); }
.tbl--comm th:nth-child(1), .tbl--comm td:nth-child(1) { width: calc(92 * var(--s)); }
.tbl--comm th:nth-child(2), .tbl--comm td:nth-child(2) { width: calc(122 * var(--s)); }
.notes { width: auto; margin-top: calc(14 * var(--s)); font-size: calc(13 * var(--s)); line-height: calc(23.4 * var(--s)); }
.notes > li { padding-left: calc(15 * var(--s)); }
.notes__note { margin-top: calc(26 * var(--s)); }
.notes__note ul li { padding-left: calc(12 * var(--s)); }
.calc-card { position: relative; width: 100%; height: auto; margin-top: calc(12 * var(--s)); padding: calc(10 * var(--s)) calc(10 * var(--s)) calc(10 * var(--s)) calc(126 * var(--s)); border-radius: calc(16 * var(--s)); border-width: 1px; text-align: center; }
.calc-card__pic { position: absolute; left: calc(2 * var(--s)); top: calc(2 * var(--s)); width: calc(118 * var(--s)); margin: 0; }
.calc-card__h { margin: 0; font-size: calc(21 * var(--s)); line-height: calc(27 * var(--s)); }
.calc-card__p { margin-top: calc(10 * var(--s)); font-size: calc(11 * var(--s)); }
.btn--calc { width: calc(335 * var(--s)); height: calc(36 * var(--s)); margin: calc(12 * var(--s)) 0 0 calc(-116 * var(--s)); font-size: calc(16 * var(--s)); line-height: 1; border-radius: calc(8 * var(--s)); padding-right: calc(24 * var(--s)); }
.btn--calc .pc-br { display: none; }
.btn--calc svg { right: calc(14 * var(--s)); width: calc(9 * var(--s)); }

/* bonus table */
.st--bonus { margin-top: calc(22 * var(--s)); padding: 0 calc(75 * var(--s)) calc(8 * var(--s)); }
.tbl--bonus { width: calc(343 * var(--s)); margin: calc(16 * var(--s)) 0 0 calc(16 * var(--s)); border-spacing: calc(5 * var(--s)) calc(5 * var(--s)); }
.tbl--bonus th { height: calc(44 * var(--s)); font-size: calc(10 * var(--s)); line-height: calc(13 * var(--s)); border-radius: calc(8 * var(--s)); white-space: normal; }
.tbl--bonus td { height: calc(60 * var(--s)); font-size: calc(10.5 * var(--s)); line-height: calc(14 * var(--s)); border-radius: calc(8 * var(--s)); white-space: normal; }
.tbl--bonus th:nth-child(1), .tbl--bonus td:nth-child(1) { width: calc(75 * var(--s)); }
.tbl--bonus th:nth-child(2), .tbl--bonus td:nth-child(2) { width: calc(75 * var(--s)); }
.tbl--bonus th:nth-child(3), .tbl--bonus td:nth-child(3) { width: calc(90 * var(--s)); }
.notes--2 { width: auto; margin: calc(20 * var(--s)) calc(20 * var(--s)) 0; }
.notes--2 .notes__note { margin-top: 0; }

/* terms stacked */
.terms { display: block; margin: calc(10 * var(--s)) calc(16 * var(--s)) 0; }
.term { min-height: 0; padding: calc(52 * var(--s)) calc(7 * var(--s)) calc(8 * var(--s)) calc(8 * var(--s)); border-radius: calc(16 * var(--s)); border-width: 1px; }
.term + .term { margin-top: calc(20 * var(--s)); }
.term__h { left: calc(-2 * var(--s)); top: calc(4 * var(--s)); height: calc(64 * var(--s)); width: calc(343 * var(--s)); }
.hex { width: calc(57 * var(--s)); height: calc(64 * var(--s)); }
.term__t { margin-left: calc(-26 * var(--s)); padding: 0 calc(18 * var(--s)) 0 calc(34 * var(--s)); height: calc(39 * var(--s)); line-height: calc(39 * var(--s)); font-size: calc(12 * var(--s)); border-radius: 0 calc(16 * var(--s)) calc(16 * var(--s)) 0; }
.term__t::after { width: calc(20 * var(--s)); right: calc(-7 * var(--s)); border-radius: 0 calc(16 * var(--s)) calc(16 * var(--s)) 0; }
.notes--term { font-size: calc(12.8 * var(--s)); line-height: calc(30 * var(--s)); letter-spacing: 0; }
.notes--term > li { padding-left: calc(14 * var(--s)); }

.sw { display: none; }

/* footer (mobile frame) */
.ft { margin-top: calc(13 * var(--s)); background: #fff; }
.ft__in { display: block; width: auto; height: auto; margin: 0; padding: 0 calc(10 * var(--s)); }
.ft__about, .ft__col, .ft__lang, .ft__resp { display: none; }
.ft__side { width: auto; margin: 0; }
.ft__side h4 { margin: calc(2 * var(--s)) 0 calc(4 * var(--s)); font-size: calc(9 * var(--s)); }
.ft__apps { position: relative; gap: calc(4 * var(--s)); align-items: center; }
.ft__apps--support { display: none; }
.ft__apps .btn, .ft__apps .btn + .btn { width: calc(81 * var(--s)); }
.btn--app { height: calc(18 * var(--s)); font-size: calc(9 * var(--s)); font-weight: 600; border-radius: calc(4 * var(--s)); gap: calc(4 * var(--s)); background: var(--orange); }
.btn--app svg { width: calc(5.5 * var(--s)); }
.ft__thantai-link { display: block; position: absolute; right: calc(7 * var(--s)); top: calc(-9 * var(--s)); line-height: 0; } .ft__thantai { display: block; width: calc(152 * var(--s)); height: auto; } /* Figma floats it beside both rows */
.ft__pay { gap: calc(6 * var(--s)); align-items: center; }
.ft__pay span { width: calc(79 * var(--s)); height: calc(17 * var(--s)); font-size: calc(7 * var(--s)); border-radius: calc(3 * var(--s)); }
.ft__pay .ft__pay-usdt { display: inline-flex; } .ft__pay-18 { display: block; width: calc(24 * var(--s)); height: auto; margin-left: auto; }
.ft__h-support { display: none; }
.ft__bar { width: auto; margin: calc(22 * var(--s)) calc(10 * var(--s)) 0; border-top: 0; padding: 0 0 calc(17 * var(--s)); }
.ft__links:not(.ft__links--mb) { display: none; }
.ft__links--mb { display: block; font-size: calc(12 * var(--s)); color: #666; }
.ft__links--mb p { display: flex; justify-content: center; column-gap: calc(16 * var(--s)); }
.ft__links--mb p + p { margin-top: calc(12 * var(--s)); }
.ft__links--mb a { line-height: 1.1; }
.ft__links--mb a:not(:last-child)::after { right: calc(-8.5 * var(--s)); background: #666; }
.ft__logos { width: calc(355 * var(--s)); margin: calc(11 * var(--s)) 0 0; }
.ft__copy { display: none; }

/* calculator modal on phones: full-width sheet */
.calc { padding: 2vh 8px; }
.calc__grid { grid-template-columns: 1fr; }
.calc__stats { gap: 8px; }
.stat { font-size: 11px; padding: 10px 4px 8px; }
.calc__status { flex-direction: column; align-items: flex-start; gap: 8px; }
.tiers { grid-template-columns: 1fr 1fr; }