/* Giao diện đề xuất cho trang AI Tutors.
   Màu lấy bằng getComputedStyle trên exam.flyer.us/en/real-time-conversation/topic ngày 13/10/2026,
   không chép tay: nền trang #F0E7FF · dải tím #6A23B1 · thẻ cấp độ rgb(158,95,221) ·
   thẻ chủ đề nền rgb(245,255,232) chữ rgb(118,159,65) · nút Free talk gradient
   rgb(244,142,119)→rgb(227,98,69) · tiêu đề thẻ rgb(24,24,27) 16px/700 · phông LinotteFont. */
.sc {
  --bg: #F0E7FF; --band: #6A23B1; --lvl: rgb(158, 95, 221);
  --cat-bg: rgb(245, 255, 232); --cat-fg: rgb(118, 159, 65);
  --ink: rgb(24, 24, 27); --muted: #6B6680; --line: rgb(229, 231, 235);
  --warm1: rgb(244, 142, 119); --warm2: rgb(227, 98, 69);
  font-family: LinotteFont, "Baloo 2", "Open Sans", system-ui, sans-serif;
  background: var(--bg); color: var(--ink); position: relative; overflow: hidden;
}

/* ---------- khung máy ---------- */
.gallery { display: flex; flex-wrap: wrap; gap: 26px; margin: 18px 0 0; align-items: flex-start }
.dev { flex: none }
.dev > b { display: block; font: 700 12.5px "Open Sans", sans-serif; color: var(--muted); margin: 8px 0 0; text-align: center }
.phone { width: 390px; height: 844px; border: 11px solid #1c1c1e; border-radius: 44px; overflow: hidden; background: #fff;
  box-shadow: 0 18px 38px rgba(40, 20, 70, .18); position: relative }
.desk { width: 1180px; height: 760px; border: 10px solid #1c1c1e; border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: 0 18px 38px rgba(40, 20, 70, .18); position: relative }
/* giữ kích thước lô-gíc thật rồi thu nhỏ cả khung, không bóp từng phần tử */
/* Khung máy giữ kích thước thật rồi thu nhỏ bằng transform. Transform không đổi hộp bố cục,
   nên lớp thu nhỏ phải đặt tuyệt đối, còn dòng chú thích lấy lề trên bằng CHIỀU CAO ĐÃ THU —
   nếu để chảy bình thường, chú thích rơi xuống dưới khung và đè lên khối kế tiếp. */
.dev { position: relative; transform-origin: top left }
.dev > .wrapscale { position: absolute; top: 0; left: 0; transform-origin: top left }
.dev > b { margin: 0 }
.dev.s-ph { width: calc(412px * var(--k, 1)) }
.dev.s-ph > .wrapscale { transform: scale(var(--k, 1)) }
.dev.s-ph > b { margin-top: calc(890px * var(--k, 1) + 8px) }
.dev.s-dk { width: calc(1200px * var(--k2, 1)) }
.dev.s-dk > .wrapscale { transform: scale(var(--k2, 1)) }
.dev.s-dk > b { margin-top: calc(806px * var(--k2, 1) + 8px) }
.sc { width: 100%; height: 100%; display: flex; flex-direction: column }

/* ---------- phần chung ---------- */
.sc .band { background: var(--band); color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px; flex: none }
.sc .band h1 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: .2px }
.sc .band .bk { width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .18); display: grid; place-items: center; font-size: 15px; flex: none }
.sc .band .sp { margin-left: auto }
.sc .pill { display: inline-block; font: 700 11px "Open Sans", sans-serif; border-radius: 4px; padding: 2px 7px }
.sc .lvl { background: var(--lvl); color: #fff }
.sc .cat { background: var(--cat-bg); color: var(--cat-fg); border-radius: 999px; padding: 3px 10px }
.sc .body { flex: 1; min-height: 0; overflow: hidden; padding: 14px }
.sc .btnw { background: linear-gradient(var(--warm1), var(--warm2)); color: #fff; border: 0; border-radius: 12px;
  font: 800 15px LinotteFont, "Baloo 2", sans-serif; padding: 12px 18px; cursor: pointer; box-shadow: 0 4px 0 rgba(170, 60, 35, .45) }
.sc .btnp { background: var(--lvl); color: #fff; border: 0; border-radius: 12px; font: 800 15px LinotteFont, "Baloo 2", sans-serif;
  padding: 12px 18px; cursor: pointer; box-shadow: 0 4px 0 #6A23B1 }

/* ---------- 1 · chọn thầy cô (điện thoại) ---------- */
.tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px }
.tcard { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; cursor: pointer;
  box-shadow: 0 2px 0 rgba(40, 20, 70, .06) }
.tcard:hover { border-color: var(--lvl) }
.tcard .ph { aspect-ratio: 1/.92; overflow: hidden; background: #FAF6FF }
.tcard .ph img { width: 100%; height: 100%; object-fit: cover; display: block }
.tcard .tx { padding: 8px 10px 11px }
.tcard .nm { font: 800 15px LinotteFont, "Baloo 2", sans-serif; color: var(--ink); display: flex; align-items: center; gap: 6px }
.tcard .kd { font: 600 11.5px "Open Sans", sans-serif; color: var(--muted); margin: 1px 0 6px }
.tcard .sk { font: 600 11px "Open Sans", sans-serif; color: var(--cat-fg); background: var(--cat-bg); border-radius: 999px; padding: 2px 8px; display: inline-block }

/* ---------- 2 · hồ sơ thầy cô ---------- */
.hero { background: linear-gradient(180deg, #E9DBFF, #F6F1FF); border-radius: 18px; padding: 12px; display: flex; gap: 12px; align-items: center }
.hero img { width: 108px; height: 108px; object-fit: cover; border-radius: 14px; flex: none; background: #fff }
.hero .nm { font: 800 21px LinotteFont, "Baloo 2", sans-serif; margin: 0 }
.hero .sub { font: 600 12px "Open Sans", sans-serif; color: var(--muted); margin: 2px 0 7px }
.say { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; font: 600 13px "Open Sans", sans-serif;
  color: var(--ink); margin: 12px 0 0; position: relative }
.say::before { content: ""; position: absolute; top: -7px; left: 26px; width: 12px; height: 12px; background: #fff;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg) }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 0 }
.fact { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; text-align: center }
.fact b { display: block; font: 800 13px LinotteFont, "Baloo 2", sans-serif }
.fact span { font: 600 10.5px "Open Sans", sans-serif; color: var(--muted) }
.tlist { margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px }
.trow { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; display: flex; align-items: center; gap: 9px; cursor: pointer }
.trow:hover { border-color: var(--lvl) }
.trow .nm { font: 700 13.5px LinotteFont, "Baloo 2", sans-serif; flex: 1 }
.trow .cnt { font: 600 11px "Open Sans", sans-serif; color: var(--muted) }

/* ---------- 3 · đang nói ---------- */
.call { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #2A1250, #4A1E86) }
.call .stage { flex: 1; min-height: 0; display: grid; place-items: center; position: relative }
.call .stage img { width: 232px; height: 232px; object-fit: cover; border-radius: 50%; border: 5px solid rgba(255, 255, 255, .22) }
.bub { position: absolute; left: 18px; right: 18px; bottom: 14px; background: rgba(255, 255, 255, .96); border-radius: 16px;
  padding: 11px 13px; font: 700 15px LinotteFont, "Baloo 2", sans-serif; color: var(--ink); line-height: 1.35 }
.bub i { font-style: normal; color: var(--lvl) }
.call .foot { flex: none; padding: 14px 16px 20px; display: flex; align-items: center; gap: 12px }
.mic { width: 66px; height: 66px; border-radius: 50%; border: 0; background: linear-gradient(var(--warm1), var(--warm2)); color: #fff;
  font-size: 26px; cursor: pointer; box-shadow: 0 5px 0 rgba(150, 50, 30, .5); flex: none }
.mic.on { animation: pulse 1.1s infinite }
@keyframes pulse { 50% { box-shadow: 0 5px 0 rgba(150, 50, 30, .5), 0 0 0 14px rgba(244, 142, 119, .22) } }
.hintrow { flex: 1; display: flex; flex-wrap: wrap; gap: 6px }
.hintrow span { background: rgba(255, 255, 255, .16); color: #fff; border-radius: 999px; padding: 5px 10px; font: 600 11.5px "Open Sans", sans-serif }
.calltop { flex: none; padding: 12px 16px 0; display: flex; align-items: center; gap: 8px; color: #fff }
.calltop .nm { font: 800 15px LinotteFont, "Baloo 2", sans-serif }
.calltop .tm { margin-left: auto; font: 700 13px "Open Sans", sans-serif; opacity: .85 }

/* ---------- 4 · kết quả ---------- */
.res { text-align: center; padding: 6px 0 0 }
.res .stars { font-size: 30px; letter-spacing: 3px }
.res h2 { font: 800 20px LinotteFont, "Baloo 2", sans-serif; margin: 6px 0 2px }
.res .sub { font: 600 12.5px "Open Sans", sans-serif; color: var(--muted) }
.box { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; margin: 12px 0 0; text-align: left }
.box h3 { font: 800 13px LinotteFont, "Baloo 2", sans-serif; margin: 0 0 7px }
.wd { display: inline-block; background: var(--cat-bg); color: var(--cat-fg); border-radius: 999px; padding: 3px 10px;
  font: 700 12px "Open Sans", sans-serif; margin: 0 5px 5px 0 }
.fixrow { display: flex; gap: 8px; align-items: baseline; font: 600 12.5px "Open Sans", sans-serif; margin: 0 0 5px }
.fixrow b { font: 800 13px LinotteFont, "Baloo 2", sans-serif; color: var(--warm2) }

/* ---------- 5 · bản máy tính ---------- */
.dk { display: flex; flex-direction: column; height: 100% }
.dk .tools { flex: none; padding: 12px 20px; display: flex; gap: 10px; align-items: center; background: #fff; border-bottom: 1px solid var(--line) }
.dk .srch { flex: 1; max-width: 300px; background: #F6F1FF; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px;
  font: 600 13px "Open Sans", sans-serif; color: var(--muted) }
.dk .seg { display: flex; gap: 6px; margin-left: auto }
.dk .seg button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 13px;
  font: 700 12.5px "Open Sans", sans-serif; color: var(--muted); cursor: pointer }
.dk .seg button.on { background: var(--lvl); border-color: var(--lvl); color: #fff }
.dk .main { flex: 1; min-height: 0; overflow: hidden; padding: 16px 20px; display: grid; grid-template-columns: 250px 1fr; gap: 16px }
.dkside { display: flex; flex-direction: column; gap: 9px; overflow: hidden }
.dkside .t { font: 800 12px "Open Sans", sans-serif; color: var(--muted); letter-spacing: .06em; text-transform: uppercase }
.tmini { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 7px 9px; cursor: pointer }
.tmini.on { border-color: var(--lvl); box-shadow: 0 0 0 2px rgba(158, 95, 221, .18) }
.tmini img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; background: #FAF6FF }
.tmini b { font: 800 13px LinotteFont, "Baloo 2", sans-serif; display: block }
.tmini span { font: 600 10.5px "Open Sans", sans-serif; color: var(--muted) }
.dkmain { overflow: hidden }
.dkhero { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; gap: 14px; align-items: center; margin: 0 0 14px }
.dkhero img { width: 92px; height: 92px; border-radius: 14px; object-fit: cover; flex: none; background: #FAF6FF }
.dkhero h2 { margin: 0; font: 800 20px LinotteFont, "Baloo 2", sans-serif }
.dkhero p { margin: 3px 0 8px; font: 600 12.5px "Open Sans", sans-serif; color: var(--muted) }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px }
.ccard { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; cursor: pointer }
.ccard:hover { border-color: var(--lvl) }
.ccard .im { width: 84px; flex: none; background: #F3ECFF; display: grid; place-items: center; font-size: 26px }
.ccard .tx { padding: 9px 11px; min-width: 0 }
.ccard .nm { font: 700 14px LinotteFont, "Baloo 2", sans-serif; color: var(--ink) }
.ccard .de { font: 600 11px "Open Sans", sans-serif; color: var(--muted); margin: 4px 0 0; line-height: 1.35 }
.ccard .mt { font: 600 11px "Open Sans", sans-serif; color: var(--muted); margin: 6px 0 0 }

@media (max-width: 760px) { .gallery { gap: 18px } }

/* ================= PHƯƠNG ÁN B · đổi thầy cô ngay trong màn nói =================
   Màu đo bằng getComputedStyle trên chính màn hội thoại thật
   exam.flyer.us/en/real-time-conversation/topic/<id> ngày 13/10/2026:
   thanh trên trắng viền #e5e8eb · nền trang rgba(247,243,251,.6) · cột giữa rgba(239,227,251,.6)
   đồng hồ rgb(141,81,193) · bong bóng AI rgb(236,227,247)/chữ rgb(76,53,117) bo 16
   bong bóng học sinh rgb(107,63,160)/trắng · tên rgb(107,63,160) 22/700
   chip "Listening..." nền rgba(255,255,255,.8) bo tròn, chữ rgb(107,63,160) 13/600
   thẻ câu gợi ý nền #FBF0FF viền #B97DEF bo 20 đệm 8/12, chữ đen 16/500
   vòng ảnh: viền trắng 6px, vành vàng rgb(222,170,0), nền tím rgb(141,81,194)
   nút Complete gradient rgb(70,166,253)→rgb(35,139,254) · nút mic 120×70
   gradient rgb(123,176,254)→rgb(92,156,244). */
.cv { --page: #F7F3FB; --mid: #F3EAFC; --line2: #e5e8eb; --pur: rgb(107, 63, 160);
  --tim: rgb(141, 81, 193); --ai: rgb(236, 227, 247); --aifg: rgb(76, 53, 117);
  --chip: #FBF0FF; --chipbd: #B97DEF; --gold: rgb(222, 170, 0); --ring: rgb(141, 81, 194);
  font-family: LinotteFont, "Baloo 2", "Open Sans", system-ui, sans-serif;
  background: var(--page); color: rgb(33, 43, 54); width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden }
.cv .cvtop { height: 60px; flex: none; background: #fff; border-bottom: 1px solid var(--line2); display: flex; align-items: center; gap: 12px; padding: 0 16px }
.cv .cvtop .cvti { font: 800 18px LinotteFont, sans-serif }
.cv .cvtop .cvtm { background: var(--tim); color: #fff; border-radius: 8px; font: 700 16px LinotteFont, sans-serif; padding: 5px 14px }
.cv .cvtop .cvdone { background: linear-gradient(rgb(70, 166, 253), rgb(35, 139, 254)); color: #fff; border: 0; border-radius: 12px;
  font: 700 15px LinotteFont, sans-serif; padding: 9px 18px; cursor: pointer }
.cv .cvcols { flex: 1; min-height: 0; display: flex }
.cv .cvlhs { width: 330px; flex: none; border-right: 1px solid var(--line2); padding: 14px; overflow: auto; background: rgba(247, 243, 251, .6) }
.cv .cvlhs h3 { margin: 0 0 8px; font: 800 15px LinotteFont, sans-serif }
.cv .cvoc { background: #fff; border-radius: 12px; padding: 12px; margin-bottom: 10px; font-size: 13.5px; line-height: 1.45; color: #3a3a46 }
.cv .cvoc .cvrow { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 9px }
.cv .cvoc .cvrow:last-child { margin: 0 }
.cv .cvoc i { width: 16px; height: 16px; border-radius: 999px; background: #EDE7F4; flex: none; margin-top: 2px }
.cv .cvset { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border-radius: 12px; padding: 11px 12px; margin-bottom: 8px; font-size: 13.5px }
.cv .cvset b { font: 700 13.5px LinotteFont, sans-serif }
.cv .cvsw { width: 36px; height: 20px; border-radius: 999px; background: #D8D3E0; flex: none; position: relative }
.cv .cvsw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff }
/* cột giữa — chỗ đặt bộ đổi thầy cô */
.cv .cvmid { width: 304px; flex: none; background: rgba(239, 227, 251, .6); border-right: 1px solid var(--line2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; position: relative; padding: 16px }
.cv .cvav { width: 168px; height: 168px; border-radius: 999px; border: 6px solid #fff; background: var(--ring); position: relative; overflow: hidden;
  box-shadow: 0 0 0 4px var(--gold), 0 0 0 7px #fff }
.cv .cvav img { width: 100%; height: 100%; object-fit: cover; display: block }
.cv .cvnm { font: 700 22px LinotteFont, sans-serif; color: var(--pur); display: flex; align-items: center; gap: 8px }
.cv .cvnm::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: #2BB673 }
.cv .cvlis { background: rgba(255, 255, 255, .8); border-radius: 999px; padding: 5px 14px; font: 600 13px LinotteFont, sans-serif; color: var(--pur) }
.cv .cvchev { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 999px; background: #fff;
  border: 1px solid var(--chipbd); color: var(--pur); display: grid; place-items: center; font: 700 19px LinotteFont, sans-serif;
  cursor: pointer; box-shadow: 0 2px 6px rgba(60, 20, 100, .14) }
.cv .cvchev.cvl { left: 10px } .cv .cvchev.cvr { right: 10px }
.cv .cvstrip { display: flex; gap: 5px; margin-top: 6px; justify-content: center; max-width: 100% }
.cv .cvstrip span { width: 28px; height: 28px; border-radius: 999px; overflow: hidden; border: 2px solid transparent; opacity: .5; cursor: pointer }
.cv .cvstrip span.cvon { border-color: var(--gold); opacity: 1 }
.cv .cvstrip span.cvdim { opacity: .28 }
.cv .cvstrip img { width: 100%; height: 100%; object-fit: cover; display: block }
.cv .cvhint { font: 600 11.5px "Open Sans", sans-serif; color: #7A6E8C; text-align: center; line-height: 1.45; margin-top: 2px }
/* cột trò chuyện */
.cv .cvchat { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 16px; gap: 12px }
.cv .cvfeed { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 14px }
.cv .cvb { max-width: 74%; border-radius: 16px; padding: 11px 14px; font: 500 15px DinRoundProFont, LinotteFont, sans-serif; line-height: 1.4 }
.cv .cvb.cvai { background: var(--ai); color: var(--aifg); align-self: flex-start }
.cv .cvb.cvme { background: var(--pur); color: #fff; align-self: flex-end }
.cv .cvic { display: flex; gap: 8px; font-size: 15px; margin-top: -8px }
.cv .cvsep { display: flex; align-items: center; gap: 10px; color: #7A6E8C; font: 600 12px "Open Sans", sans-serif }
.cv .cvsep::before, .cv .cvsep::after { content: ""; height: 1px; background: #E2D8EE; flex: 1 }
.cv .cvsug { font: 600 15px LinotteFont, sans-serif; color: rgb(68, 68, 68) }
.cv .cvchips { display: flex; gap: 10px; justify-content: center; align-items: stretch }
.cv .cvchips .cvc { background: var(--chip); border: 1px solid var(--chipbd); border-radius: 20px; padding: 8px 12px;
  font: 500 14px LinotteFont, sans-serif; color: #000; display: flex; gap: 8px; flex: 1; cursor: pointer }
.cv .cvmic { width: 120px; height: 70px; border-radius: 999px; margin: 0 auto;
  background: linear-gradient(rgb(123, 176, 254), rgb(92, 156, 244)); display: grid; place-items: center; font-size: 30px; cursor: pointer }
/* bản điện thoại */
.cv.cvph .cvtop { height: 52px; padding: 0 12px }
.cv.cvph .cvtop .cvti { font-size: 16px } .cv.cvph .cvtop .cvtm { font-size: 14px; padding: 4px 10px }
.cv.cvph .cvtop .cvdone { font-size: 13px; padding: 7px 12px }
.cv.cvph .cvmid { width: auto; border-right: 0; border-bottom: 1px solid var(--line2); padding: 12px; gap: 7px }
.cv.cvph .cvav { width: 132px; height: 132px }
.cv.cvph .cvnm { font-size: 19px } .cv.cvph .cvchat { padding: 12px; gap: 10px }
.cv.cvph .cvb { max-width: 86%; font-size: 14px }
.cv.cvph .cvchips { flex-wrap: wrap } .cv.cvph .cvchips .cvc { flex: 1 1 44%; font-size: 12.5px }
.cv.cvph .cvmic { width: 104px; height: 60px; font-size: 26px }
.cv .cvdots { display: flex; gap: 5px; justify-content: center }
.cv .cvdots i { width: 6px; height: 6px; border-radius: 999px; background: #CDBFE2 }
.cv .cvdots i.cvon { background: var(--pur); width: 16px }
/* tấm hỏi khi đổi giữa chừng */
.cv .cvmask { position: absolute; inset: 0; background: rgba(28, 12, 48, .42); display: flex; align-items: flex-end }
.cv .cvsheet { background: #fff; border-radius: 20px 20px 0 0; padding: 18px 16px 20px; width: 100%; text-align: center }
.cv .cvsheet h4 { margin: 10px 0 4px; font: 800 19px LinotteFont, sans-serif; color: rgb(33, 43, 54) }
.cv .cvsheet .cvsub { font-size: 13px; color: #6B6680; margin-bottom: 12px }
.cv .cvsheet ul { list-style: none; margin: 0 0 14px; padding: 0; text-align: left; font-size: 13.5px; color: #3a3a46; line-height: 1.5 }
.cv .cvsheet ul li { display: flex; gap: 8px; margin-bottom: 7px }
.cv .cvsheet .cvtwo { display: flex; gap: 10px }
.cv .cvsheet .cvtwo > * { flex: 1 }
.cv .cvswap { display: flex; align-items: center; justify-content: center; gap: 12px }
.cv .cvswap .cvs { width: 62px; height: 62px; border-radius: 999px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--gold) }
.cv .cvswap .cvs.cvoff { box-shadow: 0 0 0 3px #D8D3E0; opacity: .5 }
.cv .cvswap img { width: 100%; height: 100%; object-fit: cover; display: block }
.cv .cvbtn { border: 0; border-radius: 12px; font: 800 14px LinotteFont, sans-serif; padding: 12px 10px; cursor: pointer }
.cv .cvbtn.cvgo { background: linear-gradient(rgb(70, 166, 253), rgb(35, 139, 254)); color: #fff }
.cv .cvbtn.cvno { background: #EFE9F6; color: var(--pur) }
.cv .cvlim { display: inline-block; background: #FFF4D6; color: #8A6A00; border-radius: 999px; padding: 3px 10px; font: 700 11.5px "Open Sans", sans-serif }
.lvlpill { display: inline-block; background: #E7F7EC; color: #1E7A42; border-radius: 999px; padding: 2px 9px; font: 700 11px "Open Sans", sans-serif; vertical-align: 2px }

/* Khung máy tính không thu nhỏ quá mức trên điện thoại: giữ hệ số tối thiểu rồi cho cuộn ngang.
   Thu đúng tỉ lệ bề rộng màn hình thì ở 390px khung chỉ còn 342×272 — nhìn thành vệt mờ. */
/* display:flex để .dev vẫn là mục flex — nếu là khối thường, lề trên của thẻ chú thích
   gộp ra ngoài và khung máy tính co lại còn mỗi dòng chữ. */
.scrollx { display: flex; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; flex: 1 1 100%; min-width: 0 }
.scrollx > .dev { flex: none }
.scrollx::-webkit-scrollbar { height: 7px }
.scrollx::-webkit-scrollbar-thumb { background: #D6C9E8; border-radius: 99px }
.swipe-note { display: none; flex: 1 1 100%; font: 600 11.5px "Open Sans", sans-serif; color: #7A6E8C; margin: 2px 0 0 }
@media (max-width: 900px) { .swipe-note { display: block } }
@media (max-width: 700px) { .wide4 { min-width: 620px } }