/* =========================================================================
   Vinaweb – Trang giải pháp Phần mềm quản lý báo giá (pages/phan-mem-bao-gia.php)
   Nạp SAU about.css + gws.css: banner, đầu mục, hỏi đáp, về Vinaweb dùng chung.
   File này gồm phần riêng của trang, bọc trong .qtn (tiền tố qt-).
   ========================================================================= */

.qt-h2 { max-width: 900px; margin: 22px auto 0; }
.qtn svg, .qt-phero svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Banner: ảnh màn hình thật + thông báo nổi ---------- */
.qt-trust__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; }
.qt-trust__ic svg { width: 17px; height: 17px; }
/* Khung trình duyệt chứa ảnh màn hình thật (banner, các bước, kiểm soát giá) */
.qt-frame { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -36px rgba(33,34,82,.5), 0 0 0 1px rgba(33,34,82,.08); }
.qt-frame__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-bottom: 1px solid #ececf2; background: #f7f7f9; }
.qt-frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: #dcdce2; }
.qt-frame__bar span { flex: 1; max-width: 260px; margin-left: 10px; padding: 3px 12px; border-radius: 6px; font-size: 11.5px; color: #8a8a8a; background: #fff; box-shadow: inset 0 0 0 1px #ececf2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qt-frame img { display: block; width: 100%; height: auto; }
.qt-hero { position: relative; padding: 30px 0 40px; animation: pheroIn 1.1s var(--ease) .2s both; }
.qt-frame--hero { width: calc(100% + 60px); rotate: 1deg; box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 50px 90px -30px rgba(0,0,0,.85); }
.qt-doc__logo { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--beige); color: var(--red); }
.qt-doc__logo svg { width: 20px; height: 20px; fill: var(--red); stroke: none; }
@keyframes qtLine { from { opacity: 0; translate: 0 8px; } }
/* Thông báo nổi: mỗi giai đoạn hiện một thẻ */
.qt-toast { position: absolute; display: flex; align-items: center; gap: 12px; width: max-content; max-width: 280px; padding: 12px 16px 12px 12px; border-radius: 14px; background: rgba(255,255,255,.97); color: var(--black); box-shadow: 0 24px 44px -18px rgba(0,0,0,.7); opacity: 0; translate: 0 12px; transition: opacity .45s, translate .6s var(--ease); pointer-events: none; }
.qt-toast > span { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; color: #fff; }
.qt-toast > span svg { width: 19px; height: 19px; }
.qt-toast p { margin: 0; line-height: 1.35; }
.qt-toast b { display: block; font-size: 13.5px; }
.qt-toast small { font-size: 12px; color: var(--gray); }
.qt-toast--send { left: -36px; top: -4px; } .qt-toast--send > span { background: #1d4ed8; }
.qt-toast--view { right: -24px; top: 44%; } .qt-toast--view > span { background: #d97706; }
.qt-toast--ok { left: 0; bottom: 18px; } .qt-toast--ok > span { background: #17924a; }
.qt-hero[data-stage="1"] .qt-toast--send, .qt-hero[data-stage="2"] .qt-toast--view, .qt-hero[data-stage="3"] .qt-toast--ok { opacity: 1; translate: 0 0; }

/* ---------- Vấn đề: thẻ "đang gặp" → "khi dùng phần mềm" ---------- */
.qt-pain { padding-block: var(--sec); background: var(--beige); }
/* Cùng một báo giá, hai cách làm: số 1–4 trên hình ứng với danh sách bên dưới */
.qt-pain__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 44px; }
.qt-vs__name { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--black); }
.qt-vs--app .qt-vs__name { color: var(--red); }
.qt-vs--app .qt-doc__logo { width: 26px; height: 26px; border-radius: 7px; background: #fff; }
.qt-vs--app .qt-doc__logo svg { width: 16px; height: 16px; }
.qt-vs__shot { position: relative; }
.qt-pin { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; font-style: normal; font-weight: 800; line-height: 1; color: #fff; background: var(--red); box-shadow: 0 0 0 3px #fff, 0 6px 12px -4px rgba(0,0,0,.4); }
.qt-vs__shot .qt-pin { position: absolute; translate: -50% -50%; }
.qt-vs__list { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: qtv; }
.qt-vs__list li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: center; font-size: 16.5px; line-height: 1.4; color: var(--gray); counter-increment: qtv; }
.qt-vs__list li::before { content: counter(qtv); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; font-weight: 800; color: var(--red); background: #fff; }
.qt-vs--app .qt-vs__list li { font-weight: 600; color: var(--black); }
.qt-vs--app .qt-vs__list li::before { color: #fff; background: var(--red); }
/* File Excel vẽ bằng HTML: co theo bề rộng khung (cqw) để cao bằng ảnh phần mềm */
.qt-sheet { container-type: inline-size; }
.qt-sheet__scale { aspect-ratio: 1400 / 768; display: flex; flex-direction: column; font-size: 2.5cqw; color: #333; }
.qt-sheet__title { display: flex; align-items: center; gap: .5em; margin: 0; padding: .55em .9em; font-weight: 600; color: #fff; background: #107c41; }
.qt-sheet__title img { width: 1.3em; height: 1.3em; padding: .12em; border-radius: .2em; background: #fff; }
.qt-sheet__title .qt-pin { margin-left: auto; }
.qt-sheet__fx { display: flex; gap: .9em; margin: 0; padding: .4em .9em; border-bottom: 1px solid #dcdcdc; font-family: Consolas, Menlo, monospace; color: #555; background: #fafafa; }
.qt-sheet__fx b { font-family: var(--font); font-weight: 600; }
.qt-sheet__fx span { font-style: italic; color: #999; }
.qt-sheet table { flex: 1; width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.qt-sheet th, .qt-sheet td { padding: 0 .6em; border: 1px solid #e2e2e2; white-space: nowrap; }
.qt-sheet th { width: 2.2em; padding: 0; font-weight: 500; text-align: center; color: #777; background: #f3f3f3; }
.qt-sheet__cols th:nth-child(2) { width: 33%; }
.qt-sheet__cols th:nth-child(3) { width: 10%; }
.qt-sheet td { position: relative; text-align: right; }
.qt-sheet td:first-of-type { text-align: left; }
.qt-sheet__head td { font-weight: 700; text-align: center !important; background: #eaf4ee; }
.qt-sheet__sum td { font-weight: 700; }
.qt-sheet .is-err { font-weight: 700; color: #c00; background: #fde7e7; box-shadow: inset 0 0 0 2px #c00; }
.qt-sheet .is-old { background: #fff4c2; }
.qt-sheet td .qt-pin { position: absolute; top: 0; left: 0; width: 1.5em; height: 1.5em; font-size: .85em; translate: -35% -35%; box-shadow: 0 0 0 2px #fff; }
.qt-sheet__title .qt-pin { width: 1.5em; height: 1.5em; font-size: .85em; box-shadow: 0 0 0 2px #fff; }
.qt-files__ext { flex: none; width: 24px; height: 24px; object-fit: contain; }

/* ---------- Vòng đời báo giá: 4 bước dạng tab, thanh tiến trình chạy khi tự chuyển ---------- */
.qt-life { padding-block: var(--sec); background: #fff; }
.qt-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 760px; margin: 36px auto 0; }
.qt-steps__btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 12px 4px; border: 0; border-radius: 14px; background: var(--beige); font: inherit; font-size: 15.5px; font-weight: 700; color: var(--gray); cursor: pointer; overflow: hidden; transition: background .3s, color .3s, box-shadow .3s; }
.qt-steps__btn i { font-style: normal; font-size: 12.5px; font-weight: 700; color: #aaa; transition: color .3s; }
.qt-steps__btn:hover { color: var(--black); }
.qt-steps__btn.is-on { color: var(--black); background: #fff; box-shadow: inset 0 0 0 1px rgba(186,19,26,.35), 0 12px 26px -16px rgba(33,34,82,.5); }
.qt-steps__btn.is-on i { color: var(--red); }
.qt-steps__btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.qt-steps__bar { position: absolute; left: 14px; right: 14px; bottom: 7px; height: 3px; border-radius: 3px; background: transparent; overflow: hidden; }
.qt-steps__bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--red); }
.qt-steps__btn.is-on .qt-steps__bar { background: #f1e6e6; }
.qt-life.is-auto .qt-steps__btn.is-on .qt-steps__bar span { animation: qtBar var(--dur, 7s) linear both; }
@keyframes qtBar { to { width: 100%; } }
.qt-pane { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; margin-top: 44px; }
.qt-pane[hidden] { display: none; }
.qt-pane.is-on .qt-pane__mock, .qt-pane.is-on .qt-pane__text { animation: qtIn .6s var(--ease) both; }
.qt-pane.is-on .qt-pane__text { animation-delay: .08s; }
@keyframes qtIn { from { opacity: 0; translate: 0 14px; } }
.qt-pane__n { font-size: 54px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(186,19,26,.45); }
.qt-pane__text h3 { margin-top: 14px; font-size: 26px; font-weight: 700; line-height: 1.3; color: var(--black); }
.qt-pane__text .gw-checks { margin-top: 22px; }

.qt-note { max-width: 760px; margin: 28px auto 0; text-align: center; font-size: 13.5px; line-height: 1.6; color: var(--gray); }

/* ---------- Kiểm soát giá: 2 ảnh màn hình có chú thích ---------- */
.qt-price { padding-block: var(--sec); background: var(--beige); }
.qt-price__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; }
.qt-price__item { margin: 0; }
.qt-price__item figcaption { margin-top: 18px; font-size: 15px; line-height: 1.65; color: var(--gray); }
.qt-price__item figcaption b { display: block; margin-bottom: 4px; font-size: 17px; color: var(--black); }

/* ---------- Thử lập báo giá ---------- */
.qt-try { padding-block: var(--sec); background: var(--beige); }
.qt-try__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 28px; align-items: start; margin-top: 48px; }
.qt-try__panel { padding: 24px; border-radius: 22px; background: #fff; box-shadow: 0 24px 48px -36px rgba(33,34,82,.45); }
.qt-try__cap { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--gray); }
.qt-cat { display: grid; margin: 0; padding: 0; list-style: none; }
.qt-cat__item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid #efefef; transition: opacity .25s; }
.qt-cat__item:first-child { border-top: 0; padding-top: 4px; }
.qt-cat__item.is-zero .qt-cat__name { color: var(--gray); }
.qt-cat__name { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--black); }
.qt-cat__name small { display: block; font-size: 13px; font-weight: 400; color: var(--gray); font-variant-numeric: tabular-nums; }
.qt-qty { display: flex; align-items: center; flex: none; border: 1px solid var(--line); border-radius: 100px; }
.qt-qty button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; font: inherit; font-size: 18px; line-height: 1; color: var(--black); cursor: pointer; transition: background .2s, color .2s; }
.qt-qty button:hover { background: var(--beige); color: var(--red); }
.qt-qty input { width: 40px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 700; text-align: center; color: var(--black); -moz-appearance: textfield; appearance: textfield; }
.qt-qty input::-webkit-inner-spin-button, .qt-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qt-qty :focus-visible { outline: 2px solid var(--red); outline-offset: 1px; border-radius: 6px; }
.qt-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #efefef; }
.qt-seg { display: flex; padding: 4px; border-radius: 12px; background: var(--beige); }
.qt-seg label { flex: 1; cursor: pointer; }
.qt-seg input { position: absolute; opacity: 0; pointer-events: none; }
.qt-seg span { display: grid; place-items: center; height: 36px; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--gray); transition: background .25s, color .25s, box-shadow .25s; }
.qt-seg input:checked + span { color: #fff; background: var(--red); box-shadow: 0 6px 14px -6px rgba(186,19,26,.6); }
.qt-seg input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
/* Tờ báo giá xem trước */
.qt-paper { position: relative; padding: 30px 30px 26px; border-radius: 6px; background: #fff; font-size: 14px; color: var(--text); box-shadow: 0 1px 0 #e9e6dc, 0 40px 70px -40px rgba(33,34,82,.55); }
.qt-paper::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; border-radius: 6px 6px 0 0; background: var(--red); }
.qt-paper__head { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid #eee; }
.qt-paper__co { display: flex; align-items: center; gap: 12px; }
.qt-paper__co b { display: block; font-size: 14.5px; letter-spacing: .03em; color: var(--black); }
.qt-paper__co small { font-size: 12.5px; color: var(--gray); }
.qt-paper__no { text-align: right; }
.qt-paper__no b { display: block; font-size: 20px; font-weight: 800; letter-spacing: .08em; color: var(--red); }
.qt-paper__no small { display: block; font-size: 12.5px; color: var(--gray); }
.qt-paper__to { margin: 16px 0 12px; }
.qt-paper__to b { color: var(--black); }
.qt-paper__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.qt-paper__table th { padding: 9px 8px; font-size: 12px; font-weight: 700; text-align: left; color: var(--gray); background: #faf9f6; }
.qt-paper__table td { padding: 10px 8px; border-bottom: 1px solid #f0efeb; vertical-align: top; }
.qt-paper__table :is(th, td):nth-child(n+3) { text-align: right; }
.qt-paper__table :is(th, td):first-child { width: 28px; color: var(--gray); }
.qt-paper__table td:nth-child(2) { font-weight: 600; color: var(--black); }
.qt-paper__table td:last-child { font-weight: 600; white-space: nowrap; }
.qt-paper__table tr.is-new td { animation: qtFlash 1s ease-out; }
@keyframes qtFlash { from { background: #fdf0dc; } }
.qt-paper__empty { margin: 0; padding: 22px 0; text-align: center; color: var(--gray); border-bottom: 1px solid #f0efeb; }
.qt-paper__sum { display: grid; gap: 6px; width: min(100%, 320px); margin: 16px 0 0 auto; font-variant-numeric: tabular-nums; }
.qt-paper__sum div { display: flex; justify-content: space-between; gap: 20px; }
.qt-paper__sum dt { color: var(--gray); }
.qt-paper__sum dd { margin: 0; font-weight: 600; color: var(--black); }
.qt-paper__total { margin-top: 4px; padding-top: 10px; border-top: 2px solid var(--black); }
.qt-paper__total dt, .qt-paper__total dd { font-size: 17px; font-weight: 800; color: var(--red); }
.qt-paper__words { margin: 14px 0 0; font-size: 13.5px; color: var(--gray); }
.qt-paper__words i { color: var(--black); }
.qt-paper__terms { margin: 6px 0 0; font-size: 13px; color: var(--gray); }
.qt-paper__cta { display: flex; justify-content: flex-end; margin-top: 22px; padding-top: 20px; border-top: 1px dashed #e4e1d8; }

/* ---------- Tính năng ---------- */
.qt-feat { padding-block: var(--sec); background: #fff; }
.qt-flow { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 0; margin: 36px 0 0; padding: 0; list-style: none; }
.qt-flow li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--black); }
.qt-flow li + li::before { content: ""; width: 40px; height: 1.5px; margin: 0 10px; background: repeating-linear-gradient(90deg, #c9c9c9 0 5px, transparent 5px 9px); }
.qt-flow span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--black); background: var(--beige); }
.qt-flow svg { width: 20px; height: 20px; }
.qt-flow li.is-hot span { color: #fff; background: var(--red); box-shadow: 0 0 0 6px rgba(186,19,26,.12); }
.qt-flow li.is-hot b { color: var(--red); }
.qt-feat__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.qt-fcard { padding: 24px 22px 26px; border-radius: 20px; background: var(--beige); transition: opacity .8s var(--ease), translate .8s var(--ease), background .35s, box-shadow .35s, transform .35s var(--ease); }
.qt-fcard__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--red); background: #fff; box-shadow: 0 0 0 1px rgba(33,34,82,.06), 0 8px 18px -10px rgba(33,34,82,.3); }
.qt-fcard__ic svg { width: 23px; height: 23px; }
.qt-fcard h3 { margin-top: 18px; font-size: 17px; font-weight: 700; color: var(--black); }
.qt-fcard p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--gray); }
@media (hover: hover) { .qt-fcard:hover { background: #fff; box-shadow: 0 0 0 1px rgba(186,19,26,.35), 0 24px 40px -24px rgba(33,34,82,.4); transform: translateY(-4px); } }
/* Phần tuỳ biến: khối nền tối như banner */
.qt-custom { display: grid; grid-template-columns: .75fr 1.25fr; gap: 40px; align-items: center; margin-top: 24px; padding: 36px 40px; border-radius: 24px; color: #fff; background: radial-gradient(600px 300px at 100% 0%, rgba(186,19,26,.5), transparent 70%), var(--ink, #0a0d24); }
.qt-custom__head h3 { font-size: 24px; font-weight: 700; line-height: 1.35; }
.qt-custom__head p { margin-top: 10px; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.72); }
.qt-custom__list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin: 0; padding: 0; list-style: none; }
.qt-custom__list li { display: flex; gap: 14px; }
.qt-custom__ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; color: #ffb3b6; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.qt-custom__ic svg { width: 20px; height: 20px; }
.qt-custom__list b { font-size: 15.5px; }
.qt-custom__list p { margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.68); }

/* ---------- So sánh Excel, Word ---------- */
.qt-cmp { padding-block: var(--sec); background: var(--beige); }
.qt-cmp__wrap { max-width: 980px; margin: 44px auto 0; border-radius: 22px; background: #fff; overflow: hidden; box-shadow: 0 30px 60px -44px rgba(33,34,82,.5); }
.qt-cmp__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.qt-cmp__table thead th { padding: 22px 20px 18px; font-size: 16px; font-weight: 700; text-align: left; color: var(--black); }
.qt-cmp__table thead th.is-hot { color: var(--red); }
.qt-cmp__ex { display: flex; gap: 6px; margin-bottom: 10px; }
.qt-cmp__table tbody th { width: 22%; padding: 16px 20px; font-weight: 600; text-align: left; color: var(--black); }
.qt-cmp__table td { padding: 16px 20px; line-height: 1.5; color: var(--gray); }
.qt-cmp__table td.is-hot { font-weight: 600; color: var(--black); background: #fdf6f6; }
.qt-cmp__table thead th.is-hot { background: #fdf6f6; }
.qt-cmp__table tbody tr { border-top: 1px solid #f0efeb; }
.qt-cmp__table td i { display: inline-block; width: 18px; height: 18px; margin: 0 10px -3px 0; }
.qt-x { border-radius: 50%; background: #efefef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 9px no-repeat; }

/* ---------- Triển khai ---------- */
.qt-deploy { padding-block: var(--sec); background: #fff; }
.qt-deploy__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 48px 0 0; padding: 0; list-style: none; counter-reset: none; }
.qt-deploy__step figure { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; }
.qt-deploy__step img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ease); }
@media (hover: hover) { .qt-deploy__step:hover img { scale: 1.05; } }
.qt-deploy__step figure span { position: absolute; left: 12px; top: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 14px; font-weight: 800; color: #fff; background: var(--red); }
.qt-deploy__step h3 { margin-top: 18px; font-size: 18px; font-weight: 700; color: var(--black); }
.qt-deploy__step p { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: var(--gray); }

/* ---------- Màn hình nhỏ ---------- */
@media (max-width: 1200px) {
  .qt-feat__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .qt-hero { margin-top: 10px; padding: 40px 0 50px; }
  .qt-frame--hero { width: 100%; }
  .qt-pane, .qt-try__grid { grid-template-columns: 1fr; gap: 32px; }
  .qt-pain__grid { grid-template-columns: 1fr; gap: 40px; max-width: 640px; margin-inline: auto; }
  .qt-pane__text { order: -1; }
  .qt-custom { grid-template-columns: 1fr; gap: 24px; }
  .qt-deploy__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .qt-toast { max-width: 230px; padding: 10px 12px 10px 10px; }
  .qt-toast--send { left: 0; top: 0; }
  .qt-toast--view { right: 0; top: 40%; }
  .qt-hero { padding-bottom: 70px; }
  .qt-frame--hero { width: 100%; rotate: 0deg; }
  .qt-price__grid { grid-template-columns: 1fr; }
  .qt-toast--ok { left: 0; bottom: 0; }
  .qt-vs__list li { font-size: 15.5px; }
  .qt-vs__shot .qt-pin { width: 20px; height: 20px; font-size: 11.5px; box-shadow: 0 0 0 2px #fff; }
  .qt-feat__grid, .qt-custom__list, .qt-deploy__list { grid-template-columns: 1fr; }
  .qt-steps { grid-template-columns: repeat(2, 1fr); }
  .qt-pane__n { font-size: 42px; }
  .qt-pane__text h3 { font-size: 22px; }
  .qt-try__panel { padding: 18px; }
  .qt-opts { grid-template-columns: 1fr; }
  .qt-paper { padding: 22px 16px 20px; font-size: 13px; }
  .qt-paper__head { flex-direction: column; gap: 12px; }
  .qt-paper__no { text-align: left; }
  .qt-paper__table th:nth-child(3), .qt-paper__table td:nth-child(3), .qt-paper__table th:nth-child(5), .qt-paper__table td:nth-child(5) { display: none; }
  .qt-paper__table td small { display: block; }
  .qt-paper__cta { justify-content: stretch; }
  .qt-paper__cta .btn { width: 100%; justify-content: space-between; }
  .qt-flow li + li::before { width: 14px; margin: 0 6px; }
  .qt-flow li { font-size: 13.5px; }
  .qt-flow span { width: 36px; height: 36px; }
  .qt-custom { padding: 26px 20px; }
  .qt-cmp__wrap { border-radius: 16px; }
  .qt-cmp__table { font-size: 13.5px; }
  .qt-cmp__table thead td { display: none; }
  .qt-cmp__table thead th { padding: 16px 12px 12px; font-size: 14px; }
  .qt-cmp__table tbody tr { display: grid; grid-template-columns: 1fr 1fr; }
  .qt-cmp__table tbody th { grid-column: 1 / -1; width: auto; padding: 14px 12px 4px; }
  .qt-cmp__table td { padding: 6px 12px 14px; }
  .qt-cmp__table thead tr { display: grid; grid-template-columns: 1fr 1fr; }
  .qt-cmp__table td i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .qt-hero { animation: none; }
  .qt-life.is-auto .qt-steps__btn.is-on .qt-steps__bar span { animation: none; }
}
.qt-paper__sm { display: none; font-weight: 400; color: var(--gray); }