/* E39 – Cẩm nang · mobile (< 900px). Frame 375 × --s, like Đại lý.
   Article frames are drawn at 430 in Figma; the user picked the 375 frames as the base, so --a = --s × 375/430. */
:root { --s: clamp(0.8px, calc(100vw / 375), 1.3px); --a: calc(var(--s) * 0.872093); }
body { background: #FAF9FE; }
.hdr, .shell, .ft { width: calc(375 * var(--s)); margin-left: auto; margin-right: auto; }

/* header: Figma "Header Mobile" 375 × 73 (the 430 "TopAppBar" of the article frames is not used) */
.hdr { height: calc(73 * var(--s)); box-shadow: none; }
.hdr__in { width: 100%; }
.hdr__burger { left: calc(16 * var(--s)); top: calc(28 * var(--s)); width: calc(24 * var(--s)); height: calc(18 * var(--s)); }
.hdr__logo { left: calc(58 * var(--s)); top: calc(19 * var(--s)); }
.hdr__logo img { width: calc(101 * var(--s)); }
.hdr__cskh { left: calc(202 * var(--s)); top: calc(16 * var(--s)); }
.hdr__cskh img { width: calc(42 * var(--s)); }
.hdr__home { left: calc(250 * var(--s)); top: calc(25 * var(--s)); width: calc(108 * var(--s)); height: calc(25 * var(--s)); gap: calc(5 * var(--s)); padding-left: calc(10 * var(--s)); border-width: .5px; border-radius: calc(4.15 * var(--s)); font-size: calc(11.94 * var(--s)); box-shadow: 0 calc(2 * var(--s)) 0 #FF7A33, inset 0 calc(-1 * var(--s)) calc(2 * var(--s)) rgba(0,0,0,.25); }
.hdr__home-ico { width: calc(16 * var(--s)); height: calc(16 * var(--s)); }
.hdr__home-ico img { width: calc(9 * var(--s)); }

/* menu: a card in place of the page (Figma "Mb main MENU": card 343 at x16, 19 below the header) */
.menu { --m: calc(var(--s) * 0.7977); position: relative; display: none; width: calc(343 * var(--s)); min-height: 0; margin: calc(19 * var(--s)) auto calc(26 * var(--s)); padding-bottom: calc(36 * var(--m)); border-radius: calc(19.1 * var(--s)); transform: none; visibility: visible; transition: none;
  box-shadow: 0 calc(4 * var(--s)) calc(14.7 * var(--s)) rgba(0,0,0,.25), 0 calc(4 * var(--s)) calc(2.7 * var(--s)) rgba(0,0,0,.25); }
.menu-open .menu { display: block; }
.menu-open .page, .scrim { display: none; }
.menu-open .shell { min-height: 0; padding-top: 1px; background: #fff url('assets/home-bg-mb.jpg') 0 calc(-121 * var(--s)) / calc(375 * var(--s)) auto no-repeat; }
.menu__top { height: calc(72 * var(--m)); padding-top: calc(14 * var(--m)); padding-left: calc(24 * var(--m)); padding-right: calc(24 * var(--m)); }
.menu__search { margin-top: calc(10 * var(--m)); }
.menu__list { margin-top: calc(28.8 * var(--m)); gap: calc(18.8 * var(--m)); } /* Figma list frame pads its first item by 15 */
.menu__support { margin-top: calc(25 * var(--m)); }
.menu__h { font-family: var(--font); font-size: calc(32 * var(--m)); }
.menu__h + .menu__list { margin-top: calc(10 * var(--m)); }
.mi { height: calc(69 * var(--m)); } .si { height: calc(85.2 * var(--m)); } /* Figma mobile rows: 55 and 68 */
.menu__panel[data-panel-id="main"]::after { top: calc(105 * var(--m)); } /* "mENU FORMAT" variant: rail starts 95 below the list top */

/* home: Figma "Mb main", band y 121 → 732 under the header */
.home { height: calc(611 * var(--s)); background: #fff url('assets/home-bg-mb.jpg') 0 calc(-121 * var(--s)) / calc(375 * var(--s)) auto no-repeat; }
.menu-open .home { min-height: 0; }
.home__title { left: calc(35 * var(--s)); top: calc(10 * var(--s)); width: calc(305 * var(--s)); }
.home__woman { left: calc(17 * var(--s)); top: calc(119 * var(--s)); width: calc(341 * var(--s)); }
.home__links ul { left: calc(8 * var(--s)); top: calc(452 * var(--s)); grid-template-columns: repeat(2, calc(171 * var(--s))); column-gap: calc(7 * var(--s)); row-gap: calc(3 * var(--s)); transform: none; }
.lk { width: calc(171 * var(--s)); height: calc(46 * var(--s)); }
.lk__t { width: calc(150 * var(--s)); height: calc(35 * var(--s)); margin-left: calc(19 * var(--s)); padding-left: calc(4 * var(--s)); border-width: 1px; box-shadow: 0 0 calc(2 * var(--s)) #BA6300; font-size: calc(14 * var(--s)); line-height: calc(16.4 * var(--s)); letter-spacing: calc(-0.37 * var(--s)); }
.lk__ico { left: calc(6 * var(--s)); top: calc(4 * var(--s)); width: calc(37 * var(--s)); height: calc(37 * var(--s)); box-shadow: inset 0 0 calc(1.5 * var(--s)) rgba(90,2,2,.25), 0 0 0 calc(.32 * var(--s)) #FF6A00; }
.lk__ico::before { inset: calc(1.6 * var(--s)); background: radial-gradient(circle at 50% 45%, #fff 0 calc(14 * var(--s)), transparent calc(14.5 * var(--s))), linear-gradient(180deg, #fff, #FFE2D2 50%, #fff); }
.lk__ico img { width: calc(12 * var(--s)); margin-left: calc(2 * var(--s)); content: url('assets/icon-play-mb.svg'); }

/* article: Figma 430 card ("Main") on #FAF9FE, 16 under the header */
.art { min-height: 0; margin: calc(16 * var(--a)) 0 calc(16 * var(--a)); padding: 0 0 calc(86 * var(--a)); border-radius: calc(24 * var(--a)); background: #fff;
  box-shadow: 0 calc(4 * var(--a)) calc(18.4 * var(--a)) rgba(0,0,0,.25), 0 calc(4 * var(--a)) calc(3.3 * var(--a)) rgba(0,0,0,.25); }
.art--text { padding-bottom: calc(24 * var(--a)); }
.art::after { display: none; }
.art__bar { position: relative; display: flex; align-items: center; justify-content: center; min-height: calc(129 * var(--a)); padding: calc(25 * var(--a)) calc(78 * var(--a)) calc(5 * var(--a)); }
.art__back { position: absolute; left: calc(27 * var(--a)); top: calc(42 * var(--a)); display: grid; place-items: center; width: calc(45 * var(--a)); height: calc(45 * var(--a)); border-radius: calc(13.4 * var(--a)); background: #353534; color: #E5E2E1; }
.art__back svg { width: calc(10 * var(--a)); height: auto; }
.art__t { display: block; width: auto; height: auto; margin: 0; padding: 0; background: none; font-family: var(--font-title); font-size: calc(32 * var(--a)); line-height: calc(40 * var(--a)); font-weight: 800; letter-spacing: calc(-0.9 * var(--a)); color: var(--ink-title); text-transform: capitalize; }
.art--long .art__t { width: auto; height: auto; margin: 0; padding: 0; background: none; font-size: calc(18.5 * var(--a)); line-height: calc(32 * var(--a)); white-space: normal; }
.art--long .art__bar { padding-left: calc(71 * var(--a)); padding-right: calc(17 * var(--a)); }
.art .t-pc { display: none; }
.art .t-mb { display: inline; }

/* steps: one per screen, swipe; the dots follow */
.steps { justify-content: flex-start; gap: 0; margin-top: calc(5 * var(--a)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.art--long .steps { margin-top: calc(5 * var(--a)); }
.steps::-webkit-scrollbar { display: none; }
.step { flex: 0 0 100%; width: 100%; padding: 0 calc(78 * var(--a)); scroll-snap-align: center; }
.step__img { width: calc(274 * var(--a)); margin: 0; }
.art--big .step { padding: 0 calc(70 * var(--a)); }
.art--big .step__img { width: calc(330 * var(--a)); margin-left: calc(-20 * var(--a)); max-width: none; }
.step__tag { width: calc(116 * var(--a)); height: calc(34 * var(--a)); margin-top: calc(31 * var(--a)); border-radius: 0 calc(34 * var(--a)) 0 0; font-size: calc(16.8 * var(--a)); }
.art--big .step__tag { margin-top: calc(24 * var(--a)); }
.step__txt { margin-top: calc(12 * var(--a)); font-size: calc(24 * var(--a)); }
.dots { display: flex; justify-content: center; gap: calc(10 * var(--a)); margin-top: calc(24 * var(--a)); }
.dots button { width: calc(11 * var(--a)); height: calc(11 * var(--a)); border-radius: 999px; background: #D9D9D9; transition: background-color .3s; }
.dots button.on { width: calc(22 * var(--a)); background: var(--orange); }

/* text article */
.art__body { width: auto; margin: calc(5 * var(--a)) 0 0; padding: 0 calc(24 * var(--a)); border-radius: 0; box-shadow: none; background: none; }
.art__img, .art__img--poster { width: 100%; margin: 0 0 calc(24 * var(--a)); border-radius: calc(12 * var(--a)); }
.prose { font-size: calc(15.6 * var(--a)); line-height: normal; }
.prose p + p, .prose ol, .prose ol + p { margin-top: calc(19 * var(--a)); }
.prose ol { padding-left: calc(20 * var(--a)); }

/* footer (mobile frame) — Đại lý mobile footer, unchanged */
.ft { 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; }
.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; }
.ft { padding-top: calc(12 * var(--s)); }
/* hóa đơn: bank-app screenshots (phone already in the picture), Figma 338 wide at x46 */
.art--shot .step__img { width: calc(338 * var(--a)); margin-left: calc(-24 * var(--a)); }