/* HỆ THÀNH PHẦN SOLUTA — một bộ cho MỌI trang khách thấy (CT 11/10 qua VP-VN: «tinh thần tối giản, hiện đại của ChatGPT và Claude»).
   Nguyên tắc: ít chữ · nhiều khoảng trắng · một cột hẹp · phông Be Vietnam Pro / hệ thống cỡ vừa · nút bo nhẹ · màu trung tính + MỘT màu nhấn ·
   mặc định SÁNG — tối chỉ khi khách chọn (VP-VN 11/10, lối C). Thành phần: .nut (+.chinh .nguy .nguy-vien) · ô nhập · .dong (dòng cài đặt: nhãn trái, giá trị / nút phải) ·
   dialog (hộp xác nhận) · .the-nho (thẻ giữa màn) · .vai (nhãn vai) · khung cài đặt (nav trái + main).
   Trang nào cũng nạp tệp này; KHÔNG trang nào tự định màu / cỡ riêng ngoài token (he-token.css). */
@import url(he-token.css?v=9fb5bcc6);

* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--s-nen); color: var(--s-chu); font: var(--s-co-3)/1.5 var(--s-phong); -webkit-font-smoothing: antialiased }
a { color: inherit }
h1 { font-size: var(--s-co-5); font-weight: 600; margin: 0 0 24px; letter-spacing: -.01em }
h2 { font-size: var(--s-co-2); font-weight: 600; color: var(--s-nhat); margin: 32px 0 4px; text-transform: none }
h3 { font-size: var(--s-co-4); font-weight: 600; margin: 0 0 8px }
p { margin: 0 0 12px }
small, .nhat { color: var(--s-nhat) } small { font-size: var(--s-co-1); display: block; margin-top: 2px }
code { font: var(--s-co-2)/1.4 var(--s-phong-so) }
.so { font-variant-numeric: tabular-nums }

/* ── nút ── */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 6px 12px; border-radius: var(--s-bo);
  border: 1px solid var(--s-vien-dam); background: var(--s-mat); color: var(--s-chu); font: 500 var(--s-co-2)/1.2 var(--s-phong); text-decoration: none; cursor: pointer; white-space: nowrap }
.nut:hover { background: var(--s-chon) }
.nut:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--s-nhan-dam); outline-offset: 2px }
/* ⊕ 13/10 (CT: «điểm nhấn màu cam» — VP-VN: vàng mặt trời của logo, có chừng mực kiểu Claude/ChatGPT): nút CHÍNH tô màu nhấn, chữ nâu mực
   sổ (6,25:1). Các điểm nhấn khác: viền focus · gạch dưới link khi hover · ô số bước · dấu ✓ dải cam kết · gói «Gợi ý» · gạch kép dưới
   tiêu đề mục. KHÔNG tô mảng nền lớn, KHÔNG đổi màu chữ thân bài. */
.nut.chinh { background: var(--s-nhan); border-color: var(--s-nhan); color: var(--s-nhan-chu) }
.nut.chinh:hover { background: color-mix(in srgb, var(--s-nhan) 86%, var(--s-nhan-chu)); border-color: color-mix(in srgb, var(--s-nhan) 86%, var(--s-nhan-chu)) }
main a:not(.nut):hover { text-decoration-color: var(--s-nhan); text-decoration-thickness: 2px }
.nut.nguy { background: var(--s-nguy); border-color: var(--s-nguy); color: var(--s-nguy-chu) }
.nut.nguy-vien { color: var(--s-nguy); border-color: var(--s-vien-dam) }
.nut:disabled { opacity: .45; cursor: default }

/* ── ô nhập ── */
input:not([type=hidden]), select, textarea { min-height: 32px; padding: 6px 10px; border-radius: var(--s-bo); border: 1px solid var(--s-vien-dam); background: var(--s-mat);
  color: var(--s-chu); font: var(--s-co-2)/1.3 var(--s-phong); max-width: 100%; min-width: 0 }
select { padding-right: 28px }
/* ⊕ 23/10 — V-VN-0473 (VP đo Chrome): ô «Địa chỉ» ở /tao-cong-ty và form HĐ /thanh-toan thành <textarea>; luật trên chỉ phủ input/select
   nên textarea rơi về phông MONO của trình duyệt, không viền, ô thấp che chữ. Cao tối thiểu 4 dòng (14px = padding 2×6 + viền 2×1),
   field-sizing giãn theo chữ ở trình duyệt có hỗ trợ; trình duyệt khác giữ min-height + rows Cloud đặt. */
textarea { line-height: 1.5; resize: vertical; field-sizing: content; min-height: calc(4 * 1.5em + 14px) }

/* ── dòng cài đặt: nhãn trái · giá trị / nút phải ── */
.dong { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--s-vien); min-height: 60px }
.dong .nhan { min-width: 0; overflow-wrap: anywhere } .dong .nhan > span { font-weight: 500 }
/* ⊕ 23/10 — V-VN-0474 (CT: «hiện trên 1 dòng thôi đừng xuống dòng»): chữ phụ trạng thái kết nối rút gọn MỘT dòng, câu đủ ở title. Áp mọi
   bề rộng — điện thoại cũng cắt «…», không tràn ngang. Cắt được nhờ .nhan min-width: 0 ở trên; overflow-wrap của .nhan thôi tác dụng vì nowrap. */
.dong .nhan small.mot-dong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dong .phai { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; min-width: 0 }
.dong .phai form { display: contents }
.vai { font-size: var(--s-co-1); color: var(--s-nhat); padding: 2px 8px; border-radius: 999px; background: var(--s-chon); white-space: nowrap }
.rong { color: var(--s-nhat); padding: 24px 0 }
.lk-o { width: 22em }
.luot { display: grid; grid-template-columns: 7em 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--s-vien) }

/* ── hộp xác nhận ── */
dialog { border: 1px solid var(--s-vien); border-radius: 12px; background: var(--s-mat); color: var(--s-chu); padding: 24px; width: min(420px, calc(100vw - 32px)); box-shadow: var(--s-bong) }
dialog::backdrop { background: var(--s-man) }
dialog form { display: grid; gap: 12px } dialog p { color: var(--s-nhat); margin: 0 }
/* ⊕ 14/10 (V-VN-0439 mục Sao lưu): nhãn + ô chọn xếp dọc trong hộp · thanh tiến độ tạo gói (màu nhấn) · dòng lỗi (Drive lỗi, gói bị chối) */
dialog label:has(select) { display: grid; gap: 4px; font-size: var(--s-co-2); color: var(--s-nhat) } dialog small.nhat { font-size: var(--s-co-1); margin-top: -6px }
.dong progress { width: 120px; height: 6px; border: 0; border-radius: 999px; background: var(--s-chon); accent-color: var(--s-nhan); overflow: hidden }
.dong progress::-webkit-progress-bar { background: var(--s-chon) } .dong progress::-webkit-progress-value { background: var(--s-nhan) } .dong progress::-moz-progress-bar { background: var(--s-nhan) }
.loi-dong { color: var(--s-nguy); font-size: var(--s-co-2) }
/* ⊕ 17/10 (Kết nối cổng thuế): ô tích trong hộp — khối chữ chảy liền, ô 16px treo trái (cùng hình .the-vao) · fieldset trơn; disabled ⇒ ẩn */
dialog label:has(> input[type=checkbox]) { display: block; position: relative; padding-left: 26px; font-size: var(--s-co-2); line-height: 1.5; color: var(--s-chu) }
dialog label:has(> input[type=checkbox]) > input[type=checkbox] { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; accent-color: var(--s-chu) }
dialog fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0 } dialog fieldset:disabled { display: none }
.hang { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap }

/* ── ĐẦU TRANG CHUNG (VP-VN 11/10: «MỘT đầu trang» cho soluta.vn · màn OAuth · web.soluta.vn): logo S + «Soluta» bên trái, MỘT liên kết / nút
   bên phải. Logo = tai/logo-s.svg (chép nguyên đầu trang web.soluta.vn, mat/src/index.html `.tren-dau`); kích thước theo đúng đầu trang ấy:
   logo 22px · cách 8px · chữ 600 · lề 12px 20px · không gạch dưới. ── */
header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; gap: 12px }
.hieu { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--s-co-3); text-decoration: none; letter-spacing: -.01em; color: var(--s-chu) }
.hieu .logo-s { flex: none; color: var(--s-chu) }
/* ⊕ 13/10 (CT chốt logo 13/10 «I2 · màu K2»): logo CHỮ đã thành nét, hai bản — nền sáng (nâu mực + mặt trời vàng) / nền tối (trắng giấy + vàng
   sáng). Đổi theo data-theme (che-do.js đọc hệ điều hành và đặt data-theme — CSS không tự đọc chế độ hệ điều hành — test-sang-toi canh). Cao 24px (tỉ lệ 6236:1624 ⇒ rộng ~92px). */
.hieu .logo { display: block; height: 24px; width: auto; flex: none }
.hieu .logo-toi { display: none }
:root[data-theme="dark"] .hieu .logo-sang { display: none }
/* ⊕ 13/10 (P1 soluta.vn, VP-VN đo Chrome thật): khách quay lại giữ he-soluta.css CŨ trong cache (chưa có luật .logo-toi) ⇒ HAI logo cạnh nhau.
   Ảnh tối nay mang thuộc tính `hidden` trong HTML (dau_trang.LOGO) ⇒ CSS cũ thấy MỘT logo. `[hidden]` ở trên là !important ⇒ bật lại phải
   !important + đặc hiệu cao hơn. KHÔNG dùng style="" nội tuyến: CSP style-src 'self'. */
:root[data-theme="dark"] .hieu .logo-toi[hidden] { display: block !important }
.nguoi { color: var(--s-nhat); font-size: var(--s-co-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50vw }
/* ⊕ 12/10: chọn tử THU về khung NỘI DUNG (con trực tiếp của body) — đầu trang chung (tai/dau-trang.*.html) cũng có .khung + nav */
body.cai-dat > .khung { display: grid; grid-template-columns: 220px minmax(0, 680px); gap: 48px; max-width: 980px; margin: 0 auto; padding: 40px 24px 80px }
body.cai-dat > .khung > nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 24px; align-self: start }
body.cai-dat > .khung > nav h1 { font-size: var(--s-co-2); color: var(--s-nhat); font-weight: 600; margin: 0 0 8px 10px }
body.cai-dat > .khung > nav a { padding: 8px 10px; border-radius: var(--s-bo); text-decoration: none; color: var(--s-chu) }
body.cai-dat > .khung > nav a:hover { background: var(--s-chon) } body.cai-dat > .khung > nav a[aria-current=page] { background: var(--s-chon); font-weight: 600 }
.quay { display: none }

/* ── thẻ nhỏ giữa màn (lời mời, xác nhận, đăng nhập…) ── */
body.nho { min-height: 100vh; display: flex; flex-direction: column }
.the-nho { max-width: 400px; width: 100%; margin: 12vh auto 0; padding: 0 24px; display: grid; gap: 4px }
.the-nho h1 { margin-bottom: 8px } .the-nho p { color: var(--s-nhat) } .the-nho .hang, .the-nho > .nut { margin-top: 16px; justify-content: flex-start }

/* ── điện thoại: /tai-khoan = danh sách mục; trang một mục = nội dung + «‹ Cài đặt» ── */
@media (max-width: 720px) {
  body.cai-dat > .khung { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 20px 16px 64px }
  body.cai-dat > .khung > nav { position: static } body.cai-dat > .khung > nav h1 { font-size: var(--s-co-5); color: var(--s-chu); margin: 0 0 16px }
  body.cai-dat > .khung > nav a { padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--s-vien) } body.cai-dat > .khung > nav a[aria-current=page] { background: none; font-weight: 400 }
  body.cai-dat > .khung > nav a::after { content: "›"; float: right; color: var(--s-nhat) }
  body.goc > .khung > main { display: none }
  body.co-muc > .khung > nav { display: none }
  .quay { display: inline-block; color: var(--s-nhat); text-decoration: none; margin-bottom: 12px }
  .dong { flex-wrap: wrap; align-items: flex-start } .dong .phai { justify-content: flex-start; width: 100% }
  .dong .nhan { width: 100% }
  .lk-o { width: 100% }
  .luot { grid-template-columns: 5.5em 1fr auto }
}

/* ── THẺ BIỂU MẪU (đăng nhập · đăng ký · 2FA · đồng ý · chọn sổ): cột hẹp giữa màn, nhãn TRÊN ô, nút chính trải ngang ── */
main.vao { max-width: 380px; margin: 9vh auto 64px; padding: 0 20px }
.the-vao { display: grid; gap: 14px }
.the-vao h1 { margin: 0 0 4px; font-size: var(--s-co-5); font-weight: 600 }
.the-vao form { display: grid; gap: 14px; margin: 0 }
.the-vao label { display: grid; gap: 6px; font-size: var(--s-co-2); font-weight: 500 }
.the-vao input:not([type=hidden]):not([type=radio]):not([type=checkbox]) { width: 100%; min-height: 40px; font-size: var(--s-co-3) }
.the-vao button:not(.nhin), .the-vao .nut-email, .the-vao a.nut { width: 100%; min-height: 40px; justify-content: center }
.the-vao button:not(.nhin):not(.vien) { display: inline-flex; align-items: center; border-radius: var(--s-bo); border: 1px solid var(--s-nhan); background: var(--s-nhan); color: var(--s-nhan-chu); font: 500 var(--s-co-3)/1.2 var(--s-phong); cursor: pointer }
/* ⊕ 13/10 (điểm nhấn): nút GỬI của thẻ đăng nhập / đăng ký (<button> trần, không .nut) = nút chính ⇒ cùng màu nhấn; Google (.vien) giữ viền */
.the-vao button:not(.nhin):not(.vien):hover { background: color-mix(in srgb, var(--s-nhan) 86%, var(--s-nhan-chu)) }
.the-vao .doi-tk button, .the-vao button.vien { background: var(--s-mat); color: var(--s-chu); border: 1px solid var(--s-vien-dam); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--s-bo); font: 500 var(--s-co-3)/1.2 var(--s-phong); min-height: 40px; cursor: pointer }
.the-vao .phu-de, .the-vao .mo { color: var(--s-nhat); margin: 0 } .the-vao .nho { font-size: var(--s-co-1) }
.the-vao p { margin: 0 } .the-vao ul { margin: 0; padding-left: 18px; color: var(--s-nhat); display: grid; gap: 4px }
/* ĐỒNG Ý ĐIỀU KHOẢN khi đăng ký (CT 11/10): ba điểm chính ngay trên ô tích bắt buộc — chữ đậm vừa, không nhạt (khách phải ĐỌC được) */
.the-vao ul.diem-chinh { color: var(--s-chu2); font-size: var(--s-co-2) }
/* Ô TÍCH trong thẻ đăng nhập / đăng ký / đồng ý (CT 11/10 + VP-VN đo /dong-y-lai trên Chrome 1536: ô tích TO một dòng riêng, nhãn ngắt 3 dòng,
   dấu «.» lẻ): `label` của thẻ là display:grid ⇒ chữ · <a> · «.» thành ba ô lưới; ô nhập chung width 100% / min-height 40px ⇒ ô tích phình.
   Nay: mọi nhãn CHỨA checkbox (lớp nào cũng được — .dong-y của Cloud, .o-tich của mẫu) là khối chữ CHẢY LIỀN, ô tích 16px treo bên trái. */
.the-vao label:has(> input[type=checkbox]) { display: block; position: relative; padding-left: 26px; font-weight: 400; font-size: var(--s-co-2); line-height: 1.5; color: var(--s-chu) }
.the-vao label:has(> input[type=checkbox]) > input[type=checkbox] { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; accent-color: var(--s-chu) }
/* ⊕ 24/10 — ĐỀ XUẤT CHỜ DUYỆT (V-VN-0480 phần chỉ đọc, Cloud 6c5dee6): /tai-khoan/cong-ty/<ma>/de-xuat[/<id>] dùng khung cổng `main.vao rong`.
   Thẻ form 380px không chứa nổi bảng ngày · nội dung · số tiền · hạn ⇒ `.rong` nới 760px. ⚠️ `.rong` TRÙNG lớp toàn cục «ô trống» ở trên
   (chữ nhạt + padding 24px 0 ⇒ mất lề hai bên ở 390) ⇒ đặt lại cả hai ở đây (0,2,1 thắng 0,1,0).
   Danh sách (bảng CÓ thead): ≤ 560px mỗi đề xuất thành một khối — nội dung trọn dòng, ngày · hạn · số tiền dòng dưới; bảng không cuộn ngang,
   chữ nội dung không bị ép còn một cột hẹp. Ô hạn mang nhãn từ `data-nhan` của cổng (vắng ⇒ không nhãn). Bảng Nợ/Có (không thead) giữ
   hình bảng mọi khổ. `.canh` = «Thiếu chứng từ», cùng hình `.card .canh-bao`. Chữ bấm được (liên kết nội dung) 14px — luật 23/10 ở cuối tệp. */
main.vao.rong { max-width: 760px; margin-top: 40px; padding: 0 20px; color: var(--s-chu) }
.bang-dx { width: 100%; border-collapse: collapse; font-size: var(--s-co-3); line-height: 1.45; font-variant-numeric: tabular-nums }
.bang-dx th, .bang-dx td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--s-vien); vertical-align: top }
.bang-dx th:first-child, .bang-dx td:first-child { padding-left: 0 } .bang-dx th:last-child, .bang-dx td:last-child { padding-right: 0 }
.bang-dx th { color: var(--s-nhat); font-weight: 500; font-size: var(--s-co-2); white-space: nowrap }
.bang-dx td:first-child, .bang-dx td.so, .bang-dx thead ~ tbody td:last-child { white-space: nowrap }
.bang-dx td.so, .bang-dx th:nth-child(3):nth-last-child(2) { text-align: right }
.bang-dx thead ~ tbody td:nth-child(2) { overflow-wrap: anywhere } .bang-dx tbody:only-child td:nth-child(2) { white-space: nowrap }   /* bảng Nợ/Có: cột 2 là SỐ HIỆU TK — bản đầu bẻ «642|2» ở 390 */
.the-vao .canh { padding: 10px 12px; background: var(--s-vang-nen); border-left: 3px solid var(--s-vang); border-radius: 0 var(--s-bo) var(--s-bo) 0; font-size: var(--s-co-2); line-height: 1.55; color: var(--s-chu) }
.the-vao h3 { margin: 6px 0 -6px; font-size: var(--s-co-2); font-weight: 600; color: var(--s-nhat) }
@media (max-width: 560px) {
  .bang-dx thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
  .bang-dx thead ~ tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--s-vien) }
  .bang-dx thead ~ tbody td { display: block; padding: 0; border: 0 }
  .bang-dx thead ~ tbody td:nth-child(2) { grid-column: 1 / -1; grid-row: 1 }
  .bang-dx thead ~ tbody td:nth-child(1), .bang-dx thead ~ tbody td:nth-child(4) { grid-row: 2; color: var(--s-nhat); font-size: var(--s-co-2) }
  .bang-dx thead ~ tbody td:nth-child(4) { grid-column: 2 }
  .bang-dx thead ~ tbody td:nth-child(4)[data-nhan]::before { content: attr(data-nhan) " " }
  .bang-dx thead ~ tbody td.so { grid-row: 2; grid-column: 3; font-weight: 600 }
}
.nut-google, .nut-email { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; border-radius: var(--s-bo); border: 1px solid var(--s-vien-dam);
  background: var(--s-mat); color: var(--s-chu); font: 500 var(--s-co-3)/1.2 var(--s-phong); text-decoration: none }
.ngan { display: flex; align-items: center; gap: 12px; color: var(--s-nhat); font-size: var(--s-co-1) } .ngan::before, .ngan::after { content: ""; flex: 1; border-top: 1px solid var(--s-vien) }
.hop { border-radius: var(--s-bo); padding: 10px 12px; font-size: var(--s-co-2) } .hop.loi { background: var(--s-nguy-nen); color: var(--s-nguy) } .hop.tin { background: var(--s-chon); color: var(--s-chu) }
.o-mk { position: relative; display: block } .o-mk input { padding-right: 40px }
.nhin { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: none; color: var(--s-nhat); cursor: pointer; padding: 6px }
.nhin svg { width: 20px; height: 20px } .nhin .khi-an { display: none } .nhin[aria-pressed=true] .khi-hien { display: none } .nhin[aria-pressed=true] .khi-an { display: inline }
.o-ma-2fa { letter-spacing: .3em; font-variant-numeric: tabular-nums; text-align: center; font-size: var(--s-co-4) !important }
.qr-2fa { display: grid; justify-items: center; gap: 8px } .qr-2fa svg { width: 160px; height: 160px; padding: 8px; border-radius: var(--s-bo) }
/* token:ngoai-le-bat-dau qr — mã QR phải trên nền TRẮNG tuyệt đối để máy quét đọc được, ở cả bảng tối */
.qr-2fa svg { background: #fff }
/* token:ngoai-le-ket-thuc qr */
.ma-khoi-phuc { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; padding: 12px 16px !important; list-style: none; background: var(--s-chon); border-radius: var(--s-bo); color: var(--s-chu) !important }
.ma-tra { font-family: var(--s-phong-so) }
.the-tk { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--s-vien); border-radius: var(--s-bo) }
.the-tk .anh { width: 32px; height: 32px; border-radius: 50%; background: var(--s-chon); display: grid; place-items: center; font-weight: 600 }
.the-tk .ten { font-weight: 500 } .the-tk .email { color: var(--s-nhat); font-size: var(--s-co-2) }
.chan { display: flex; justify-content: center; gap: 16px; padding: 24px 16px; color: var(--s-nhat); font-size: var(--s-co-1) } .chan a { color: inherit }

[hidden] { display: none !important }
.buoc-2 { display: grid; gap: 14px }
/* ── NGOẠI LỆ CÓ TÊN với luật «màu chỉ từ token»: nút Google theo Google Sign-In Branding Guidelines (sáng #FFFFFF/#747775/#1F1F1F ·
   tối #131314/#8E918F/#E3E3E3) + nền chuyển màu chữ G CHÍNH THỨC (chép nguyên cong/soluta-cong.css — CSP style-src 'self'). Không sửa màu.
   Phép kiểm token bỏ qua ĐÚNG khối giữa hai dấu dưới. ── */
/* token:ngoai-le-bat-dau google */
.g-nen { background: conic-gradient(from 90deg,rgba(255, 70, 65, 1) 0deg,rgba(255, 70, 65, 1) 4.14555deg,rgba(49, 134, 255, 1) 39.154deg,rgba(49, 134, 255, 1) 72.0044deg,rgba(0, 165, 183, 1) 96.7463deg,rgba(14, 188, 95, 1) 120.897deg,rgba(14, 188, 95, 1) 154.722deg,rgba(108, 196, 0, 1) 179.136deg,rgba(255, 204, 0, 1) 203.588deg,rgba(255, 211, 20, 1) 226.915deg,rgba(255, 204, 0, 1) 251.688deg,rgba(255, 106, 43, 1) 273.129deg,rgba(253, 70, 65, 1) 289.305deg,rgba(255, 70, 65, 1) 359.593deg,rgba(255, 70, 65, 1) 360deg); height: 100%; width: 100% }
.nut-google { background: #FFFFFF; color: #1F1F1F; border-color: #747775 } .nut-google:hover { background: #F7F8F8 }
.nut-google .g-logo { flex: none; width: 20px; height: 20px }
:root[data-theme=dark] .nut-google { background: #131314; color: #E3E3E3; border-color: #8E918F }
:root[data-theme=dark] .nut-google:hover { background: #1F1F20 }
/* token:ngoai-le-ket-thuc google */
/* ⊕ 24/10 — V-VN-0480 (CT chọn A, CHỈ VN): «Đăng nhập bằng Zalo» là cách đăng nhập THÊM, GẮN vào tài khoản Soluta đã có — nút đứng ngay dưới
   Google, cùng khuôn (cao, bo, cỡ chữ). NGOẠI LỆ CÓ TÊN với luật «màu chỉ từ token»: xanh Zalo #0068FF + chữ trắng, hai mặt như nhau (màu thương
   hiệu không đổi theo bảng). Ô .z-logo là CHỖ cho biểu tượng chính thức trong bộ nhận diện Zalo for Developers (CT đăng ký app) — chưa có
   tệp ⇒ tạm chữ «Z» trong ô trắng; KHÔNG tự vẽ logo Zalo. */
/* token:ngoai-le-bat-dau zalo */
.nut-zalo { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; border-radius: var(--s-bo); border: 1px solid #0068FF;
  background: #0068FF; color: #FFFFFF; font: 500 var(--s-co-3)/1.2 var(--s-phong); text-decoration: none }
.nut-zalo:hover { background: #0057D9; border-color: #0057D9 }
.nut-zalo .z-logo { flex: none; width: 20px; height: 20px; border-radius: 5px; background: #FFFFFF; color: #0068FF; display: grid; place-items: center; font-weight: 700; font-size: var(--s-co-2) }
/* token:ngoai-le-ket-thuc zalo */
header .nguoi { display: inline-flex; align-items: center; gap: 8px }
header .nguoi .anh { width: 24px; height: 24px; border-radius: 50%; background: var(--s-chon); color: var(--s-chu); display: inline-grid; place-items: center; font-size: var(--s-co-1); font-weight: 600; flex: none }
.ma-tra { margin-left: 4px; white-space: nowrap }

/* ── THẺ ĐỒNG Ý / CHỌN SỔ (màn OAuth auth.mcp — markup + chữ của AS giữ nguyên: card · brand · sub · perm li.y/.n · details · row ·
   ds-so radio · so-mot · khoa-so · trong · foot). Câu hỏi đồng ý KHÔNG bớt ý — chỉ trình bày gọn. ── */
.card { max-width: 440px; margin: 8vh auto 48px; padding: 0 20px; display: grid; gap: 14px }
.card .brand { font-weight: 600; font-size: var(--s-co-3); margin: 0 0 8px }
.card h1 { font-size: var(--s-co-5); margin: 0; line-height: 1.35 } .card .sub { color: var(--s-nhat); margin: 0 }
.perm { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 8px; border-top: 1px solid var(--s-vien); padding-top: 14px }
.perm li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; color: var(--s-chu) }
.perm li::before { font-weight: 600 } .perm li.y::before { content: "✓"; color: var(--s-chu) } .perm li.n::before { content: "✕"; color: var(--s-nhat) }
.card details { color: var(--s-nhat); font-size: var(--s-co-1) } .card details summary { cursor: pointer }
.card details code { display: block; margin-top: 6px; overflow-wrap: anywhere }
.card .row { display: flex; gap: 8px; margin-top: 4px }
.card .row > * { flex: 1; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--s-bo); font: 500 var(--s-co-3)/1.2 var(--s-phong); text-decoration: none; cursor: pointer }
.card .btn.deny, .card .btn.tao { border: 1px solid var(--s-vien-dam); background: var(--s-mat); color: var(--s-chu) }
/* ⊕ 13/10 (VP-VN): «Cho phép» ở màn đồng ý AS = nút CHÍNH ⇒ màu nhấn như mọi nút chính (chữ --s-nhan-chu 6,25:1); «Từ chối» giữ viền */
.card .allow { border: 1px solid var(--s-nhan); background: var(--s-nhan); color: var(--s-nhan-chu) }
.card .allow:hover { background: color-mix(in srgb, var(--s-nhan) 86%, var(--s-nhan-chu)); border-color: color-mix(in srgb, var(--s-nhan) 86%, var(--s-nhan-chu)) }
.card .foot, .card .khoa-so, .card .chon-nhan { color: var(--s-nhat); font-size: var(--s-co-1); margin: 0 } .card .chon-nhan { font-size: var(--s-co-2); font-weight: 500; color: var(--s-chu) }
.form-chon { display: grid; gap: 14px; margin: 0 }
.ds-so { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 50vh; overflow-y: auto }
.ds-so label, .so-mot { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--s-vien); border-radius: var(--s-bo); cursor: pointer }
.ds-so label input { grid-row: span 2 } .so-mot { grid-template-columns: 1fr auto; cursor: default }
.ds-so .ten, .so-mot .ten { font-weight: 500; overflow-wrap: anywhere; min-width: 0 } .ds-so .mst, .so-mot .mst { color: var(--s-nhat); font-size: var(--s-co-1); grid-column: 2 }
.so-mot .mst { grid-column: 1 } .ds-so .vai, .so-mot .vai { grid-row: 1; grid-column: 3 } .so-mot .vai { grid-column: 2 }
.ds-so label:has(input:checked) { border-color: var(--s-chu); box-shadow: 0 0 0 1px var(--s-chu) inset }
.trong { color: var(--s-nhat) }
/* .lien-ket là <a> HOẶC <button> (AS: «Đăng xuất» là nút trong form POST) — bản trước chỉ `color: inherit` ⇒ nút hiện khung xám mặc định của trình duyệt (đo 11/10) */
.lien-ket { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 500; text-decoration: underline; cursor: pointer }
/* cảnh báo ứng dụng LẠ của AS (<p class=canh-bao> «Chỉ bấm Cho phép nếu CHÍNH BẠN vừa bấm Kết nối…», VP-VN 10/10 — chữ thường thì khách lướt qua)
   + chân «Đang đăng nhập: <email> · Đăng xuất» (.dang-xuat): chép ý từ cong/as-dong-y.css bản Be Vietnam Pro, nay qua token. */
.card .canh-bao { margin: 0; padding: 10px 12px; background: var(--s-vang-nen); border-left: 3px solid var(--s-vang); border-radius: 0 var(--s-bo) var(--s-bo) 0; font-size: var(--s-co-2); line-height: 1.55; color: var(--s-chu) }
.card .canh-bao b, .card .canh-bao strong { color: var(--s-vang) }
.dang-xuat { margin: 0 } .dang-xuat .foot b { color: var(--s-chu); font-weight: 600; overflow-wrap: anywhere }
/* logic chịu lực — CHÉP NGUYÊN cong/as-dong-y.css (tiêu đề theo sổ đã chọn, tối đa 20 sổ · Cho phép mờ khi chưa chọn) */
.td-so{list-style:none;margin:0;padding:0}.td-so>li{display:none}
.card:has(.ds-so input:checked) .td-chung{display:none}
.card:has(.ds-so>li:nth-child(1) input:checked) .td-so>li:nth-child(1),
.card:has(.ds-so>li:nth-child(2) input:checked) .td-so>li:nth-child(2),
.card:has(.ds-so>li:nth-child(3) input:checked) .td-so>li:nth-child(3),
.card:has(.ds-so>li:nth-child(4) input:checked) .td-so>li:nth-child(4),
.card:has(.ds-so>li:nth-child(5) input:checked) .td-so>li:nth-child(5),
.card:has(.ds-so>li:nth-child(6) input:checked) .td-so>li:nth-child(6),
.card:has(.ds-so>li:nth-child(7) input:checked) .td-so>li:nth-child(7),
.card:has(.ds-so>li:nth-child(8) input:checked) .td-so>li:nth-child(8),
.card:has(.ds-so>li:nth-child(9) input:checked) .td-so>li:nth-child(9),
.card:has(.ds-so>li:nth-child(10) input:checked) .td-so>li:nth-child(10),
.card:has(.ds-so>li:nth-child(11) input:checked) .td-so>li:nth-child(11),
.card:has(.ds-so>li:nth-child(12) input:checked) .td-so>li:nth-child(12),
.card:has(.ds-so>li:nth-child(13) input:checked) .td-so>li:nth-child(13),
.card:has(.ds-so>li:nth-child(14) input:checked) .td-so>li:nth-child(14),
.card:has(.ds-so>li:nth-child(15) input:checked) .td-so>li:nth-child(15),
.card:has(.ds-so>li:nth-child(16) input:checked) .td-so>li:nth-child(16),
.card:has(.ds-so>li:nth-child(17) input:checked) .td-so>li:nth-child(17),
.card:has(.ds-so>li:nth-child(18) input:checked) .td-so>li:nth-child(18),
.card:has(.ds-so>li:nth-child(19) input:checked) .td-so>li:nth-child(19),
.card:has(.ds-so>li:nth-child(20) input:checked) .td-so>li:nth-child(20){display:block}
.form-chon:not(:has(.ds-so input:checked)) .allow{opacity:.45;cursor:not-allowed}
/* ⊕ 12/10 (V-VN-0417, CT: «phải ghi rõ là soluta sẽ lấy thông tin gì… Học tập các bên kết nối» · «chỉ xin đúng phần của soluta»):
   quyền theo NHÓM DỮ LIỆU — mỗi nhóm MỘT dòng gọn, bấm mở ra chi tiết (<details>, không JS: CSP của AS chặn script). Ba khối có nhãn
   «xem được · làm được · không đưa» theo nếp Slack («What will … be able to view / do»); hàng có viền như danh sách quyền của Microsoft / GitHub. */
.quyen { display: grid; gap: 8px; border-top: 1px solid var(--s-vien); padding-top: 14px }
.quyen .nhan { margin: 4px 0 0; font-size: var(--s-co-2); font-weight: 500; color: var(--s-chu) } .quyen .nhan:first-child { margin-top: 0 }
.quyen .perm { border-top: 0; padding-top: 0; margin: 0 }
.nhom-du-lieu { list-style: none; margin: 0; padding: 0; border: 1px solid var(--s-vien); border-radius: var(--s-bo) }
.nhom-du-lieu > li + li { border-top: 1px solid var(--s-vien) }
.card .nhom-du-lieu details { color: var(--s-chu); font-size: var(--s-co-3) }
.nhom-du-lieu summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer }
.nhom-du-lieu summary::-webkit-details-marker { display: none }
.nhom-du-lieu summary::after { content: "›"; color: var(--s-nhat); font-size: var(--s-co-4); line-height: 1; transition: transform .15s }
.nhom-du-lieu details[open] summary::after { transform: rotate(90deg) }
.nhom-du-lieu details p { margin: 0; padding: 0 12px 10px; color: var(--s-nhat); font-size: var(--s-co-2) }
.card .thu-hoi { margin: 0; color: var(--s-nhat); font-size: var(--s-co-1) } .card .thu-hoi a { text-decoration: underline }
/* «làm được» theo vai: màn nhiều sổ in cả hai dòng, đổi theo radio đang chọn (data-vai) — cùng cách .td-so đổi tiêu đề. Màn một sổ chỉ in một dòng. */
.quyen .lam-soan + .lam-xem { display: none }
.card:has(.ds-so input[data-vai="chi_doc"]:checked) .quyen .lam-soan { display: none }
.card:has(.ds-so input[data-vai="chi_doc"]:checked) .quyen .lam-soan + .lam-xem { display: grid }

/* ⊕ 20/10 (CT, học cách Casso): sơ đồ 3 nút đầu /ket-noi VÀ màn cấp quyền AS (nằm trong khối THẺ ĐỒNG Ý ⇒ dung-as-css.mjs chép sang as-dong-y.css) — «Trợ lý AI — Soluta — Sổ của công ty» + ba dòng đọc gì / ghi khi nào / sổ ở đâu */
.so-do-3 { margin: 8px 0 24px; padding: 16px 18px; border: 1px solid var(--s-vien); border-radius: 12px; background: var(--s-mat) }
.so-do-nut { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: nowrap }
.so-do-nut .nut-sd { padding: 8px 14px; border: 1px solid var(--s-vien); border-radius: 999px; background: var(--s-nen); font-weight: 600; font-size: var(--s-co-2); text-align: center }
.so-do-nut .nut-sd:nth-child(3) { border-color: var(--s-nhan); background: var(--s-nhan-nen) }
.so-do-nut .mui::before { content: "↔"; color: var(--s-nhat); font-size: var(--s-co-3); line-height: 1 }   /* ký tự, không vẽ bằng viền: bản đầu 20/10 mũi tên viền tràn hộp 6px (test-khong-tran) */
.so-do-y { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 4px; color: var(--s-chu2); font-size: var(--s-co-2) }
@media (max-width: 560px) { .so-do-nut { flex-direction: column; gap: 6px } .so-do-nut .mui::before { content: "↕" } }
/* ── MENU ĐẦU TRANG (trang giới thiệu / tài liệu): liên kết nhạt + MỘT nút chính; hẹp ⇒ chỉ còn nút (kiểu Stripe / Anthropic) ── */
header nav { display: flex; align-items: center; gap: 4px }
header nav a { padding: 6px 10px; border-radius: var(--s-bo); color: var(--s-nhat); text-decoration: none; font-size: var(--s-co-2) }
header nav a:hover { color: var(--s-chu) } header nav a.nut { color: var(--s-chu) } header nav a.nut.chinh { color: var(--s-nhan-chu) }
header > .khung, footer > .khung { display: contents }
/* ⊕ 11/10 (CT: «góc trên bên phải trông lộn xộn»): mọi trang giới thiệu cùng MỘT hàng (bo-cai/trang-soluta-vn/dau_trang.py); đầu trang
   căn theo CÙNG bề ngang với chân trang / nội dung (1040px) thay vì dính hai mép màn. Hẹp ⇒ ẩn .an-hep, GIỮ «Đăng nhập» + nút —
   bản trước ẩn mọi liên kết không phải nút ⇒ trang không có nút (kết nối, nhà phát triển) mất trắng góc phải trên điện thoại. */
header:has(> .khung) { max-width: 1040px; margin: 0 auto; padding: 16px 20px }
@media (max-width: 720px) { header nav a.an-hep { display: none } }
/* nút đổi ngôn ngữ ở ĐẦU trang (CT 11/10: «Chưa có chỗ chuyển đổi giữa 2 ngôn ngữ nhỉ?»): nhãn ngắn ngôn ngữ KIA, viền mảnh, luôn hiện */
/* ⊕ 11/10 tối (CT chốt, kiểu Claude): EN / VI là chữ NHỎ không khung ở CUỐI hàng, sau nút chính — không còn nút có viền giữa menu. */
header nav a.doi-ngon-ngu { padding: 6px 6px; color: var(--s-nhat); font-size: var(--s-co-1); font-weight: 500; letter-spacing: .04em }
header nav a.doi-ngon-ngu:hover { color: var(--s-chu) }
header nav a.nguoi { padding: 4px 8px 4px 4px; color: var(--s-chu) }
/* ⊕ 12/10: đã đăng nhập ở khổ hẹp — chip email + «Mở Soluta» + EN tràn 390px ⇒ chip chỉ còn chữ cái đầu (email đủ ở title) */
@media (max-width: 560px) { header nav .nguoi .email { display: none } header nav a.nguoi { padding: 4px } }
/* ⊕ 12/10 — ma trận nút theo trạng thái (dau-trang.js): nút TẮT = «Gói hiện tại» / «Chỉ chủ sổ đổi gói» (không href, aria-disabled) */
a.nut.tat, a.nut[aria-disabled="true"] { opacity: .55; cursor: default; pointer-events: none }
.chon-so { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; font-size: var(--s-co-2); color: var(--s-nhat) }
.chon-so select { font: inherit; padding: 4px 8px; border: 1px solid var(--s-vien); border-radius: var(--s-bo); background: var(--s-nen); color: var(--s-chu) }
@media (max-width: 420px) { header:has(> .khung) { padding: 12px 16px } header nav { gap: 2px } header nav a:not(.nut):not(.doi-ngon-ngu) { padding: 6px 6px } }

/* ── TRANG GIỚI THIỆU (trang chủ, kết nối): cột hẹp, nhiều khoảng trắng, một ý mỗi khối ── */
body.trang-chu main, body.ket-noi main { max-width: 1040px; margin: 0 auto; padding: 0 20px 80px }
body.trang-chu section { padding: 72px 0 0 } body.trang-chu .hero { padding-top: 56px }
.hero .khung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center }
.hero h1 { font-size: calc(var(--s-co-6) * 4 / 3); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; margin: 0 0 16px; text-wrap: balance }
.hero .gt { font-size: var(--s-co-4); color: var(--s-nhat); max-width: 34em; margin: 0 0 24px }
.hang-nut { display: flex; gap: 8px; flex-wrap: wrap }
.hang-nut .nut, header .nut { min-height: 36px; padding: 8px 16px; font-size: var(--s-co-3) }
.dau-muc { max-width: 40em; margin-bottom: 32px } .dau-muc h2 { font-size: var(--s-co-5); color: var(--s-chu); font-weight: 600; margin: 0 0 8px; letter-spacing: -.01em }
/* gạch KÉP nhỏ dưới tiêu đề mục — hai vạch của dấu logo (vạch 3 px, khe 2 px) */
.dau-muc h2::after { content: ''; display: block; width: 28px; height: 8px; margin-top: 10px; background: linear-gradient(var(--s-nhan) 0 3px, transparent 3px 5px, var(--s-nhan) 5px 8px) }
.dau-muc p { color: var(--s-nhat); margin: 0 }
.ba-buoc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px }
.ba-buoc .so { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--s-nhan); color: var(--s-nhan-chu); font-size: var(--s-co-1); font-weight: 600; margin: 16px 0 8px }
.ba-buoc h3 { font-size: var(--s-co-4); margin: 0 0 4px } .ba-buoc .mo { color: var(--s-nhat); margin: 0 }
/* ⊕ 13/10 V-VN-0427 (CT: «Cách hoạt động với hướng dẫn có trùng nhau không? Gộp đi»): mỗi bước trỏ bài hướng dẫn · cuối khối một liên kết mục lục */
.ba-buoc h3 a { color: inherit; text-decoration: none } .ba-buoc h3 a:hover { text-decoration: underline; text-underline-offset: 3px }
.xem-het { margin: 32px 0 0 } .xem-het a { font-weight: 500 }
figure.anh { margin: 0; aspect-ratio: 16 / 10; max-width: 100%; border-radius: 12px; background: var(--s-chon); border: 1px solid var(--s-vien); overflow: hidden }
figure.anh img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left }   /* chép trang-chu-b.css: ảnh chụp màn có nội dung chính trên-trái (lap-anh.py cắt cùng góc) */
.ba-buoc figure.anh { aspect-ratio: 4 / 3 }
/* ⊕ 11/10 (CT: «hình ảnh không hiện» — /ket-noi có 8 khung xám trống): ô ảnh CHƯA có <img> thì không lên màn. Luật ẩn cũ (body.chua-anh)
   nằm ở tai/soluta.css và rơi mất khi trang sang tệp này; luật đi theo CHÍNH ô ảnh thì không rơi được nữa. */
figure.anh:not(:has(img)) { display: none }
.gia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.goi { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--s-vien); border-radius: 12px; background: var(--s-mat) }
.goi.noi { border-color: var(--s-nhan); box-shadow: 0 0 0 1px var(--s-nhan) } .goi h3 { font-size: var(--s-co-3); margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
/* ⊕ 13/10 (CT: «Bổ sung trang chủ gói tài chính luôn đi»): mục «Soluta Tài chính» sau «Cách hoạt động» + thẻ GÓI MUA THÊM dưới bốn gói.
   Tối giản: một tiêu đề + sáu dòng chấm nhấn + một dòng nhỏ; chip «Sắp có» trung tính (chưa bán — không màu nhấn); không nút mua. */
.the-sap { font-size: var(--s-co-1); font-weight: 500; color: var(--s-chu2); padding: 2px 8px; border-radius: 999px; background: var(--s-chon); vertical-align: middle; margin-left: 8px; letter-spacing: 0 }
.tc-ds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; max-width: 52em }
.tc-ds li { position: relative; padding-left: 20px } .tc-ds li::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--s-nhan) }
.tc-ghi { color: var(--s-nhat); font-size: var(--s-co-2); margin: 20px 0 0 }
.goi-them { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px 32px; margin: 24px 0 0; padding: 20px 24px; border: 1px solid var(--s-vien); border-radius: var(--s-bo); background: var(--s-mat) }
.goi-them h3 { font-size: var(--s-co-3); margin: 0 } .goi-them .tom { margin: 4px 0 0; color: var(--s-nhat) } .goi-them .muc { margin: 0; font-weight: 600; color: var(--s-chu2) }
.goi-them .bao-mo { margin: 0; color: var(--s-nhat); font-size: var(--s-co-2) } .goi-them .bao-mo a { color: var(--s-chu); user-select: all }
@media (max-width: 820px) { .tc-ds { grid-template-columns: minmax(0, 1fr) } .goi-them { grid-template-columns: minmax(0, 1fr) } }
.the-noi { font-size: var(--s-co-1); font-weight: 500; color: var(--s-nhan-chu); padding: 2px 8px; border-radius: 999px; background: var(--s-nhan) }
.goi .muc { font-size: var(--s-co-5); font-weight: 600; margin: 0; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px }   /* ⊕ 13/10: EN «1,499,000 VND/month» tràn thẻ gói ở 1536 (tests/test-khong-tran) ⇒ «/month» xuống dòng khi hẹp */ .goi .muc small { display: inline; font-size: var(--s-co-2); font-weight: 400; color: var(--s-nhat) }
/* GIÁ THEO KỲ (CT 11/10: trả trước 3 / 6 / 12 tháng, giá / tháng khác nhau theo kỳ). Công tắc kỳ = radio + :has, KHÔNG JS — trình duyệt
   không có :has thấy kỳ 12 tháng (mặc định), vẫn đúng. Mỗi khối giá mang .k12 / .k6 / .k3; công tắc chỉ hiện khối của kỳ đang chọn. */
.ky-chon { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; position: relative }   /* VP-VN 11/10 (khảo sát): BA NÚT kỳ, không công tắc */
.ky-chon input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0 }
.ky-chon label { padding: 7px 16px; border-radius: var(--s-bo); border: 1px solid var(--s-vien-dam); background: var(--s-mat); font-size: var(--s-co-2); color: var(--s-chu); cursor: pointer; white-space: nowrap }
.ky-chon input:checked + label { border-color: var(--s-chu); background: var(--s-chu); color: var(--s-nen); font-weight: 500 }
.ky-chon input:focus-visible + label { outline: 2px solid var(--s-nhan-dam); outline-offset: 1px }
.chan-gia { margin: 14px 0 0; color: var(--s-nhat); font-size: var(--s-co-2) }   /* CT 11/10 chiều: thuế ghi MỘT lần ở chân bảng giá (giá ĐÃ gồm VAT) */
.goi .muc small.chua-thue { display: block; flex-basis: 100%; margin: 2px 0 0; font-size: var(--s-co-1) }   /* CT 11/10: số lớn CHƯA thuế, ghi rõ ngay dưới */
.goi .ky { color: var(--s-nhat); font-size: var(--s-co-1); margin: -6px 0 0; font-variant-numeric: tabular-nums; display: grid; gap: 2px }
.goi .ky .tk { color: var(--s-chu); font-weight: 500 } .goi .ky span { text-wrap: balance }   /* thẻ 4 cột hẹp: chia đều hai hàng, không để một chữ rơi xuống */
.k6, .k3 { display: none }
:has(> .ky-chon #ky-6:checked) ~ * .k12, :has(> .ky-chon #ky-3:checked) ~ * .k12 { display: none }
:has(> .ky-chon #ky-6:checked) ~ * .muc .k6, :has(> .ky-chon #ky-3:checked) ~ * .muc .k3 { display: inline }
:has(> .ky-chon #ky-6:checked) ~ * .ky .k6, :has(> .ky-chon #ky-3:checked) ~ * .ky .k3 { display: block }
.goi .tom { color: var(--s-nhat); margin: 0 } .goi ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; flex: 1; align-content: start }
.goi li { padding-left: 20px; position: relative } .goi li::before { content: "✓"; position: absolute; left: 0; color: var(--s-nhat) }
.goi .nut { margin-top: 8px }
.thanh-uu-dai { display: block; padding: 8px 16px; text-align: center; background: var(--s-nhan); color: var(--s-nhan-chu); font-size: var(--s-co-2); font-weight: 600; text-decoration: none; text-wrap: balance }   /* ⊕ 20/10 (CT, học Casso): thanh mảnh trên cùng trang chủ ⇒ #gia; hết suất ⇒ dau-trang.js ẩn */
.thanh-uu-dai:hover, .thanh-uu-dai:focus-visible { text-decoration: underline }
.goi .uu-dai { margin: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--s-nhan); background: var(--s-nhan-nen); color: var(--s-chu); font-size: var(--s-co-2); font-weight: 600; text-wrap: pretty }   /* ⊕ 20/10 (sau, CT «tập trung bản Pro»): nổi hơn một bậc — viền màu nhấn, chữ cỡ 2, đậm */   /* ⊕ 20/10: dòng ưu đãi ra mắt thẻ Pro (không in số suất còn lại — CT); hết suất ⇒ dau-trang.js ẩn */
.du-lieu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--s-vien) }
.du-lieu h3 { font-size: var(--s-co-3); margin: 0 0 4px } .du-lieu p { color: var(--s-nhat); margin: 0 }
/* ⊕ 13/10 khuya (VP-VN soát web — thu hút): DẢI TIN CẬY ngay dưới hero, chỉ SỰ THẬT kiểm được (không khách / số liệu bịa) · HỎI ĐÁP gọn kiểu Claude
   (<details>, không JS) · chỗ logo Bộ Công Thương ở chân trang (ẩn tới khi có mã). */
body.trang-chu section.dai-tin { padding-top: 40px }
/* ⊕ 20/10 (CT, học cách Casso): ba thẻ SỐ LIỆU THẬT dưới dải ✓ — số SolutaCLI đếm 20/10 (RegulationRegistry: 208 văn bản / 154 hiệu lực ngày 20/10;
   solutacli/htkk.py: 7 tờ khai + 3 bộ BCTC qua XSD). Số đổi khi kho đổi ⇒ dòng «Số liệu ngày …» bắt buộc; không số khách. */
body.trang-chu section.so-lieu { padding: 8px 0 24px }
.so-lieu ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.so-lieu li { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--s-vien); border-radius: 12px; background: var(--s-mat) }
.so-lieu b { font-size: var(--s-co-5); font-weight: 700; color: var(--s-nhan-dam); font-variant-numeric: tabular-nums; line-height: 1.1 }
.so-lieu span { color: var(--s-chu2); font-size: var(--s-co-2); text-wrap: pretty } .so-lieu .nhat { margin: 10px 0 0; text-align: center; font-size: var(--s-co-1) }
@media (max-width: 820px) { .so-lieu ul { grid-template-columns: minmax(0, 1fr) } }
.dai-tin ul { list-style: none; margin: 0; padding: 14px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px;
  border-block: 1px solid var(--s-vien); color: var(--s-nhat); font-size: var(--s-co-2) }
.dai-tin li::before { content: '✓'; margin-right: 8px; color: var(--s-nhan-dam); font-weight: 600 }
/* ⊕ 13/10 (VP-VN đo prod 390: «4 dòng ✓ căn giữa nên dấu ✓ lệch so le»): điện thoại ⇒ lưới 2 cột, căn TRÁI, dấu ✓ thẳng cột */
@media (max-width: 820px) { .dai-tin ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 16px;   /* ⊕ 13/10: còn 3 mục (CT bỏ ô chủ quản) ⇒ 2 cột để mục 3 lẻ — 1 cột; ngưỡng 820 (không 600): flex dưới đó gãy 2 + 1 so le — đo EN ở 768, tests/test-dai-tin */ justify-content: start; text-align: left }
  .dai-tin li { position: relative; padding-left: 22px } .dai-tin li::before { position: absolute; left: 0; margin-right: 0 } }   /* flex tách <span lang> khỏi chữ sau nó (EN «Công ty TNHH Soluta · Tax code», đo 13/10) */
.hoi-dap { max-width: 46em; border-top: 1px solid var(--s-vien) }
.hoi-dap details { border-bottom: 1px solid var(--s-vien) }
.hoi-dap summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 500 }
.hoi-dap summary::-webkit-details-marker { display: none }
.hoi-dap summary::after { content: '+'; color: var(--s-nhat); flex: none } .hoi-dap details[open] summary::after { content: '−' }
.hoi-dap details p { margin: 0 0 16px; color: var(--s-nhat) }
.bct { margin: 8px 0 0 } .bct img { display: block; height: auto }
.lien-phu { margin: 16px 0 0; color: var(--s-nhat); font-size: var(--s-co-2) }   /* /ket-noi: «Chưa có tài khoản? Mở tài khoản · Xem bài 1» (13/10 khuya) */
footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 1040px; margin: 0 auto; padding: 24px 20px 40px; color: var(--s-nhat); font-size: var(--s-co-1); border-top: 1px solid var(--s-vien) }
footer a { color: inherit }
/* THÔNG TIN CHỦ QUẢN (11/10 — NĐ 248 Đ4, Đ7 · Luật BVQLNTD Đ37): 2–3 dòng chữ nhỏ, trọn bề ngang chân trang, dưới hàng liên kết */
footer .chu-quan, .chan .chu-quan { flex-basis: 100%; margin: 6px 0 0; font-size: var(--s-co-1); line-height: 1.6; color: var(--s-nhat) }
.chan { flex-wrap: wrap } .chan .chu-quan { text-align: center; max-width: 640px; margin: 4px auto 0 }
@media (max-width: 900px) { .gia { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 720px) {
  .hero .khung, .ba-buoc, .du-lieu { grid-template-columns: minmax(0, 1fr) } .hero h1 { font-size: var(--s-co-6) } body.trang-chu section { padding-top: 48px }
  .gia { grid-template-columns: minmax(0, 1fr) }
}

/* ── TRANG KẾT NỐI: cột ~680px · ô địa chỉ + nút chép · công tắc phân đoạn Claude / ChatGPT · bước kèm ảnh vừa khổ ── */
body.ket-noi section { padding-top: 48px } body.ket-noi .cot { max-width: 680px; margin: 0 auto; display: grid; gap: 14px }
body.ket-noi h1 { font-size: var(--s-co-6); font-weight: 600; letter-spacing: -.02em; margin: 0 }
body.ket-noi h2 { font-size: var(--s-co-4); color: var(--s-chu); margin: 16px 0 0 } body.ket-noi .mo { color: var(--s-nhat); margin: 0 }
.dia-chi { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 6px 6px 14px; border: 1px solid var(--s-vien-dam); border-radius: 10px; background: var(--s-mat) }
.dia-chi code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--s-co-3) }
.chon-app { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--s-chon); justify-self: start }
.chon-app button { border: 0; background: none; color: var(--s-nhat); font: 500 var(--s-co-2)/1.2 var(--s-phong); padding: 7px 16px; border-radius: 8px; cursor: pointer }
.chon-app button[aria-selected=true] { background: var(--s-mat); color: var(--s-chu); box-shadow: 0 1px 2px var(--s-vien-dam) }
ol.buoc, ul.buoc { margin: 0; padding-left: 20px; display: grid; gap: 10px } ul.buoc { gap: 8px }   /* 11/10: bước thuần chữ (ô ảnh trống đã bỏ) ⇒ 10px; có ảnh thì p tự chừa lề dưới */
ol.buoc li p { margin: 0 } ol.buoc li p:has(+ figure.anh) { margin: 0 0 10px } ol.buoc figure.anh { max-width: 560px }
.ui { font-size: var(--s-co-2); font-weight: 500; padding: 1px 6px; border-radius: 6px; background: var(--s-chon); white-space: nowrap }
body.ket-noi .ghi { font-size: var(--s-co-1); color: var(--s-nhat); margin: 0 }
.an-hep { } @media (max-width: 720px) { .an-hep { display: none } body.ket-noi h1 { font-size: var(--s-co-5) } }
/* ⊕ 13/10 — /ket-noi GỌN (CT 12/10: «nhiều chữ quá. Không có hình ảnh. Xem các bên đang hướng dẫn như thế nào thì học tập»; VP-VN khảo sát,
   mẫu gần nhất monday.com: mỗi bước MỘT câu + MỘT ảnh cắt sát chỗ bấm). Nút lớn mở thẳng hộp thêm connector · ảnh minh hoạ là SVG NỘI TUYẾN tô
   bằng token ⇒ sáng / tối tự theo bảng màu, không cần hai tệp · ảnh chụp thật (màn Cho phép) có hai bản .sang / .toi · phần phụ gập trong <details>. */
.nut.lon { min-height: 44px; padding: 10px 22px; font-size: var(--s-co-4); justify-self: start }
body.ket-noi .app { display: grid; gap: 14px }
ol.buoc-anh { margin: 0; padding: 0; list-style: none; counter-reset: b; display: grid; gap: 22px }
ol.buoc-anh > li { counter-increment: b; display: grid; gap: 10px }
/* số bước đặt TUYỆT ĐỐI, câu là dòng chữ thường — bản đầu đặt <p> thành lưới ⇒ mỗi nhãn nút .ui trong câu thành một ô lưới, câu vỡ thành
   nhiều dòng (đo 390px, 13/10) */
ol.buoc-anh > li > p { margin: 0; position: relative; padding-left: 34px; min-height: 22px }
ol.buoc-anh > li > p::before { content: counter(b); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--s-nhan); color: var(--s-nhan-chu); font-size: var(--s-co-2); font-weight: 600 }
figure.mh { margin: 0 0 0 34px; max-width: 440px; border: 1px solid var(--s-vien); border-radius: 12px; overflow: hidden; background: var(--s-nen) }
figure.mh svg, figure.mh img { display: block; width: 100%; height: auto }
figure.mh img.toi { display: none }
:root[data-theme="dark"] figure.mh img.sang { display: none } :root[data-theme="dark"] figure.mh img.toi { display: block }
/* ⊕ 13/10 khuya: ảnh bước /huong-dan là <picture class="sang|toi"> hai khổ (máy tính + điện thoại .dt) — cùng luật sáng / tối như img */
figure.mh picture { display: block } figure.mh picture.toi { display: none }
:root[data-theme="dark"] figure.mh picture.sang { display: none } :root[data-theme="dark"] figure.mh picture.toi { display: block }
figure.mh figcaption { font-size: var(--s-co-1); color: var(--s-nhat); padding: 6px 10px; border-top: 1px solid var(--s-vien) }
.mh .k { fill: var(--s-mat); stroke: var(--s-vien-dam) } .mh .o { fill: var(--s-nen); stroke: var(--s-vien-dam) } .mh .t { fill: var(--s-chu); font: var(--s-co-2) var(--s-phong) }
.mh .td { font-weight: 600; font-size: var(--s-co-4) } .mh .n { fill: var(--s-nhat); font: var(--s-co-1) var(--s-phong) } .mh .b { fill: var(--s-chu) } .mh .bt { fill: var(--s-nen); font: 500 var(--s-co-2) var(--s-phong) }
.mh .kh { fill: none; stroke: var(--s-nhan); stroke-width: 2.5 } .mh .bat { fill: var(--s-nhan) } .mh .kn { fill: var(--s-mat) } .mh .chon { fill: var(--s-chon) }
body.ket-noi .them { display: grid; border-top: 1px solid var(--s-vien) }
body.ket-noi .them details { border-bottom: 1px solid var(--s-vien); padding: 12px 0 }
body.ket-noi .them summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 8px }
body.ket-noi .them summary::-webkit-details-marker { display: none }
body.ket-noi .them summary::after { content: "+"; color: var(--s-nhat); font-weight: 400 } body.ket-noi .them details[open] summary::after { content: "–" }
body.ket-noi .them details > :not(summary) { margin: 10px 0 0; color: var(--s-chu2); font-size: var(--s-co-2) }
body.ket-noi .them dl { display: grid; gap: 8px } body.ket-noi .them dt { font-weight: 500; color: var(--s-chu) } body.ket-noi .them dd { margin: 0 }
/* ⊕ 24/10 — V-VN-0475 C12 (VP-VN): ≤ 720px hàng gập «Gói và giới hạn»… cao 21px ⇒ vùng bấm 44px; đệm khối rút còn 2px để hàng gần như cũ. */
@media (max-width: 720px), (pointer: coarse) { body.ket-noi .them details { padding-block: 2px } body.ket-noi .them summary { min-height: 44px; align-items: center }
  body.ket-noi .them details[open] > :last-child { margin-bottom: 10px } }
@media (max-width: 520px) { figure.mh { margin-left: 0 } .nut.lon { justify-self: stretch } }

/* ── TRANG TÀI LIỆU (nhà phát triển · pháp lý): mục lục trái dính, chữ ~68 ký tự, bảng / mã trong khung cuộn riêng (kiểu docs Anthropic / Stripe) ── */
body.tai-lieu main.khung { display: grid; grid-template-columns: 200px minmax(0, 720px); gap: 56px; max-width: 1020px; margin: 0 auto; padding: 48px 20px 80px }
body.tai-lieu aside { position: sticky; top: 24px; align-self: start; font-size: var(--s-co-2) }
body.tai-lieu aside p { font-weight: 600; margin: 0 0 8px; color: var(--s-chu) }
body.tai-lieu aside ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
body.tai-lieu aside a { display: block; color: var(--s-nhat); text-decoration: none; padding: 4px 0 } body.tai-lieu aside a:hover { color: var(--s-chu) }
body.tai-lieu article { font-size: var(--s-co-3); line-height: 1.65; min-width: 0 } body.tai-lieu article h1 { font-size: var(--s-co-6); letter-spacing: -.02em; margin: 0 0 12px }
body.tai-lieu article h2 { font-size: var(--s-co-4); color: var(--s-chu); margin: 40px 0 10px; scroll-margin-top: 24px } body.tai-lieu .dan { color: var(--s-nhat); font-size: var(--s-co-4) }
body.tai-lieu article p { margin: 0 0 12px } body.tai-lieu article ol, body.tai-lieu article ul { padding-left: 20px; display: grid; gap: 6px; margin: 0 0 12px }
body.tai-lieu .cuon, body.tai-lieu pre { overflow-x: auto; max-width: 100% }
body.tai-lieu pre { background: var(--s-chon); padding: 12px 14px; border-radius: var(--s-bo); font: var(--s-co-2)/1.5 var(--s-phong-so) }
body.tai-lieu :not(pre) > code { font-size: var(--s-co-2); background: var(--s-chon); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere }
body.tai-lieu table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: var(--s-co-2) }   /* hẹp ⇒ bảng CUỘN trong .cuon, không ép cột vỡ chữ */
body.tai-lieu th, body.tai-lieu td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--s-vien); vertical-align: top }
body.tai-lieu th { color: var(--s-nhat); font-weight: 500 }
@media (max-width: 720px) { body.tai-lieu main.khung { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 24px } body.tai-lieu aside { display: none } body.tai-lieu article h1 { font-size: var(--s-co-5) } }
body.tai-lieu td:first-child code { white-space: nowrap; overflow-wrap: normal }   /* tên công cụ / mã lỗi không bẻ giữa chữ — bảng cuộn trong .cuon */
/* trang pháp lý: ô BIẾN chưa điền (vd «[ngày đăng]») nổi vàng nhạt để người duyệt thấy; đã điền ⇒ chữ thường */
.bien:not(.da-dien) { background: var(--s-vang-nen); color: var(--s-vang); padding: 0 4px; border-radius: 4px }
body.tai-lieu article em { color: var(--s-nhat) }

/* ── TRANG THANH TOÁN /thanh-toan (CT 11/10 qua VP-VN: «làm luôn trang thanh toán … thẻ tín dụng hoặc Apple Pay»): khuôn của trang
   thanh toán Claude / ChatGPT / Linear (đều là Stripe Checkout) — trái TÓM TẮT (gói · kỳ · tổng · ngày · tự gia hạn), phải THANH TOÁN
   (thông tin hoá đơn · phương thức · nút). Hẹp ⇒ một cột, tóm tắt lên trước. KHÔNG JS: chọn kỳ = liên kết ?ky= (máy chủ vẽ lại);
   phương thức = radio + :has hiện đúng khung. Ô THẺ không do ta vẽ: .khung-cong là chỗ cổng thanh toán nhúng (PCI — thẻ không qua máy chủ ta). ── */
.tt { display: grid; gap: 28px; max-width: 520px; margin: 32px auto 80px; padding: 0 20px }   /* VP-VN 11/10 (khảo sát): MỘT cột — kỳ → tóm tắt → hoá đơn → phương thức → một nút */
.tt h1 { font-size: var(--s-co-4); margin: 0 0 4px } .tt h2 { margin: 0 0 10px; color: var(--s-chu); font-size: var(--s-co-3) }
.tt .gia-lon { font-size: var(--s-co-6); font-weight: 600; margin: 0 0 24px; font-variant-numeric: tabular-nums } .tt .gia-lon small { display: inline; font-size: var(--s-co-2); font-weight: 400; color: var(--s-nhat); margin-left: 4px }
.tt .gia-gom { margin: -20px 0 24px; font-size: var(--s-co-2) }   /* giá gồm VAT ngay dưới số lớn chưa thuế (CT 11/10, Luật Giá Đ29) */
.chon-ky { display: grid; gap: 8px; margin: 0 0 24px }
.chon-ky a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; border: 1px solid var(--s-vien); border-radius: var(--s-bo); text-decoration: none; background: var(--s-mat) }
.chon-ky a[aria-current] { border-color: var(--s-chu); box-shadow: 0 0 0 1px var(--s-chu) inset }
.chon-ky b { font-weight: 500 } .chon-ky .phai { text-align: right; font-variant-numeric: tabular-nums } .chon-ky small { margin: 0; grid-column: 1 / -1 } .chon-ky .tk { color: var(--s-chu); font-weight: 500 }
.tom-tat { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 0; padding: 16px 0; border-top: 1px solid var(--s-vien); font-variant-numeric: tabular-nums }
.tom-tat dt { color: var(--s-nhat) } .tom-tat dd { margin: 0; text-align: right; padding-left: 16px } .tom-tat .tong { font-weight: 600; padding-top: 8px; border-top: 1px solid var(--s-vien) }
.gia-han { display: flex; gap: 10px; align-items: flex-start; padding: 14px 0 0; border-top: 1px solid var(--s-vien) } .gia-han input { margin-top: 3px } .gia-han small { margin: 2px 0 0 }
.tt input[type=radio], .tt input[type=checkbox] { accent-color: var(--s-chu) }
.tt form { display: grid; gap: 24px; margin: 0 } .tt fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0 }
.tt legend { font-weight: 600; margin: 0 0 10px; padding: 0 }
.tt label.o, .hd-nhap label.o { display: grid; gap: 4px; font-size: var(--s-co-2); color: var(--s-nhat) } .tt label.o input, .hd-nhap label.o input { width: 100%; min-height: 38px; font-size: var(--s-co-3); color: var(--s-chu) }
.tt label.o textarea, .hd-nhap label.o textarea { width: 100%; font-size: var(--s-co-3); color: var(--s-chu) }   /* KHÔNG min-height 38px: đè mất trần 4 dòng ở trên */
/* ba loại người mua (CT 11/10): công ty / hộ kinh doanh / cá nhân — mỗi loại một form, chỉ form của loại đang chọn hiện (không JS) */
.hd-loai .ky-chon { margin: 4px 0 12px } .hd-loai .hd-nhap { display: none }
.hd-loai:has(#loai-dn:checked) .hd-nhap[data-loai=dn], .hd-loai:has(#loai-hkd:checked) .hd-nhap[data-loai=hkd], .hd-loai:has(#loai-cn:checked) .hd-nhap[data-loai=cn] { display: grid }
.hd-nhap { display: grid; gap: 10px; max-width: 440px; margin: 4px 0 8px } .hd-nhap .nut { justify-self: start }   /* hoá đơn: khách TỰ NHẬP (CT 11/10) */
.tt .hai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px }
.pt { border: 1px solid var(--s-vien); border-radius: var(--s-bo); background: var(--s-mat) }
.pt > label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--s-vien); cursor: pointer } .pt > label:first-of-type { border-top: 0 }
.pt > label span:last-child { margin-left: auto; color: var(--s-nhat); font-size: var(--s-co-1) }
.pt .mo-pt { display: none; padding: 0 14px 14px }
.pt > label:has(input:checked) + .mo-pt { display: grid; gap: 8px }
.khung-cong { min-height: 120px; border: 1px dashed var(--s-vien-dam); border-radius: var(--s-bo); display: grid; place-items: center; text-align: center; padding: 12px; color: var(--s-nhat); font-size: var(--s-co-1) }
/* ⊕ CT 11/10: chủ tài khoản XÁC NHẬN HAI LẦN — (1) ô tích bắt buộc; chưa tích thì nút «Thanh toán» không bấm được (không JS: :has);
   (2) hộp nhắc lại TỪNG trường hoá đơn + ba cam kết. Nút gửi trong hộp vẫn bị `required` của ô tích chặn nếu lọt qua. */
.xac-nhan-hd { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--s-vien-dam); border-radius: var(--s-bo); background: var(--s-mat); font-size: var(--s-co-2) } .xac-nhan-hd input { flex-shrink: 0; width: 16px; height: 16px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--s-chu) }   /* ⊕ 20/10 (Cloud VN): thiếu flex-shrink ⇒ chữ dài «mục 5 + 9» bóp ô tích; min-height 32 chung của input ⇒ ô lệch xuống giữa hai dòng — cùng hình ô tích ở dialog / .the-vao */
.tt form:has(#xn-hd:not(:checked)) .nut.chinh.to, .tt form:has(#mst-go-lai:invalid) .nut.chinh.to { opacity: .45; pointer-events: none }   /* không JS; có JS thì nut-khoa.js đặt disabled thật */
.tt .go-lai-mst { margin: 16px 0 8px }
.hd-doc { display: grid; gap: 8px } .hd-doc .tom-tat { padding-top: 0; border-top: 0 } .hd-doc a { font-size: var(--s-co-2) }
.cam-ket { margin: 12px 0 8px; padding: 0; list-style: none; display: grid; gap: 4px; font-weight: 500 } .cam-ket li::before { content: "· "; color: var(--s-nhat) }   /* ⊕ 13/10 VP-VN: «✕» đọc như «sai» trên hai câu cam kết ⇒ chấm giữa */
dialog .tom-tat { padding: 8px 0 0; font-size: var(--s-co-2) }
/* ⊕ 13/10 (hộp xác nhận thanh toán, đo 390px): `1fr auto` để ô giá trị dài (địa chỉ) ăn hết bề ngang ⇒ nhãn gãy từng từ («Mã / số / thuế»);
   và hộp cao hơn màn thì hai nút «Quay lại · Xác nhận…» ra ngoài khung nhìn, không cuộn được. ⇒ nhãn có bề rộng tối thiểu; hộp có trần cao,
   tự cuộn; hàng nút dính đáy hộp — luôn thấy nút xác nhận. */
dialog .tom-tat { grid-template-columns: minmax(6.5em, 38%) minmax(0, 1fr) } dialog .tom-tat dd { overflow-wrap: anywhere }
dialog .tom-tat dt.tong { white-space: nowrap }   /* ⊕ 13/10 VP-VN (hộp thử Cloud): «Tổng (đã gồm VAT 8%)» gãy hai dòng ở cột nhãn 38% — số tiền ngắn, nhường chỗ cho nhãn */
dialog[popover], dialog[open] { max-height: calc(100dvh - 32px); overflow-y: auto }
dialog .hang { position: sticky; bottom: -24px; margin: 0 -24px -24px; padding: 12px 24px 24px; background: var(--s-mat); border-top: 1px solid var(--s-vien) }
/* Lịch sử thanh toán phí sổ (VP-VN 11/10: tách khỏi lượt ví — phí sổ thu thẳng qua thẻ / QR): ngày · gói · kỳ · phương thức · số tiền · hoá đơn */
.tt-dong { display: grid; grid-template-columns: 7em minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--s-vien) } .tt-dong .so { text-align: right; font-variant-numeric: tabular-nums } .tt-dong a { font-size: var(--s-co-2) }
@media (max-width: 600px) { .tt-dong { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px } .tt-dong a { grid-column: 2 } }
/* ⊕ CT 11/10 («hạn chế khách hàng sai»): «Hoá đơn sẽ xuất cho:» CHỮ TO trong khung, ngay trên ô tích; hộp xác nhận bắt GÕ LẠI MST —
   chưa khớp (pattern = MST đã khai) thì nút gửi KHOÁ, không JS (:has(:invalid)). Ô MST ở Tài khoản báo sai hình / sai chữ số kiểm tra khi gõ. */
.tt form .hd-doc { padding: 14px 16px; border: 1px solid var(--s-vien-dam); border-radius: var(--s-bo); background: var(--s-mat) }
.hd-to { margin: 0; display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 6px 14px; font-size: var(--s-co-4) }
.hd-to dt { color: var(--s-nhat); font-size: var(--s-co-2); align-self: center } .hd-to dd { margin: 0; font-weight: 600; overflow-wrap: anywhere }
.go-lai-mst { display: grid; gap: 4px; font-size: var(--s-co-2); color: var(--s-nhat); margin: 4px 0 0 } .go-lai-mst input { min-height: 38px; font-size: var(--s-co-4); letter-spacing: .04em; font-variant-numeric: tabular-nums }
dialog .chiu-tn { color: var(--s-chu); font-weight: 500; margin: 8px 0 12px }
dialog:has(input[name=mst_xac_nhan]:invalid) button[type=submit] { opacity: .45; pointer-events: none }
.hd-nhap .bao-o { color: var(--s-nguy); margin: -6px 0 0; min-height: 0 } .hd-nhap .bao-o:empty { display: none }
@media (max-width: 420px) { .hd-to { grid-template-columns: minmax(0, 1fr) } .hd-to dd { margin-bottom: 6px } }
.khung-cong.qr { width: 168px; aspect-ratio: 1; min-height: 0; margin: 4px 0 8px }   /* mã QR chuyển khoản RIÊNG mỗi tài khoản (Ví & thanh toán) */
.tt .nut.chinh.to { width: 100%; min-height: 44px; font-size: var(--s-co-3) }
.tt .le { color: var(--s-nhat); font-size: var(--s-co-1); margin: -12px 0 0 } .tt .le a, dialog .le a { color: inherit }
/* hộp xác nhận KHÔNG JS: <dialog popover> mở bằng popovertarget (VP-VN: cảnh báo không hoàn tiền nằm trong hộp lúc bấm) */
dialog[popover] { margin: auto } dialog[popover] h3 { margin: 0 0 8px } dialog[popover] p { margin: 0 0 16px }
/* chuyển khoản không tự gia hạn được (không giữ thẻ) ⇒ chọn QR thì ẩn ô tự gia hạn, hiện câu nhắc trước hạn */
.tt:has(#pt-qr:checked) .chi-the { display: none } .tt .chi-qr { display: none } .tt:has(#pt-qr:checked) .chi-qr { display: block }
/* trang KẾT QUẢ: một thẻ giữa màn — thành công / thất bại / đang chờ */
.kq { max-width: 440px; margin: 10vh auto 64px; padding: 0 20px; display: grid; gap: 14px }
.kq .dau { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; background: var(--s-chon); color: var(--s-chu) }
.kq .dau.loi { background: var(--s-nguy-nen); color: var(--s-nguy) } .kq h1 { margin: 0; font-size: var(--s-co-5) } .kq p { margin: 0 }
.kq .nut-hang { display: flex; gap: 8px; flex-wrap: wrap }
@media (max-width: 420px) { .tt .hai { grid-template-columns: minmax(0, 1fr) } }

/* ⊕ 13/10 — /huong-dan (VP-VN, CT duyệt): mặc CHÍNH lớp body.ket-noi (cột 680px, bước có số, khung hình, ô Chép) + phần riêng dưới đây.
   Video 16:9 (1280×720) khung bo như ảnh; chưa có video ⇒ ô chữ «đang cập nhật» cùng khổ (không khung trống, không ảnh giả). Mục lục: thẻ số thứ tự. */
body.huong-dan .ve { margin: 0; font-size: var(--s-co-2); color: var(--s-nhat) } body.huong-dan .ve a { color: inherit }
body.huong-dan figure.video { margin: 4px 0 0; border: 1px solid var(--s-vien); border-radius: 12px; overflow: hidden; background: var(--s-nen) }
body.huong-dan figure.video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--s-nen) }   /* 1280×720 */
/* ⊕ 13/10 khuya (CT: «trên điện thoại thì phải hiện video dọc chứ»): khổ điện thoại ⇒ khung 9:16, cao tối đa 80vh, canh giữa. Chuỗi media PHẢI
   trùng KHO_DOC ở huong-dan/dung.py (nguồn <source media> + ket-noi.js) — lệch thì bản dọc vào khung ngang (hoặc ngược lại) và hiện có viền. */
@media (max-width: 600px), (orientation: portrait) {
  body.huong-dan figure.video:not(.cho) { width: min(100%, calc(80vh * 9 / 16)); width: min(100%, calc(80dvh * 9 / 16)); margin-inline: auto }
  body.huong-dan figure.video video { aspect-ratio: 9 / 16 }
}
body.huong-dan figure.video.cho { padding: 20px; color: var(--s-nhat); font-size: var(--s-co-2); text-align: center }   /* gọn — ô 16:10 trống đọc như video hỏng */
body.huong-dan figure.video.cho p { margin: 0 }
body.huong-dan .ket-qua { margin: 0; padding-left: 20px; display: grid; gap: 6px }
body.huong-dan .bai-tiep { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--s-vien); font-size: var(--s-co-2) }
body.huong-dan .bai-tiep a { color: var(--s-chu) }
/* ⊕ V-VN-0427 (CT: «trình bày xấu» — danh sách dính chữ «1Kết nối…»): mục lục là LƯỚI THẺ — 1 cột điện thoại, 2 cột ≥ 960px. Thẻ: ảnh bìa
   16:9 (khung video), «Bài n · thời lượng», tiêu đề, một dòng mô tả. Thay danh sách số tròn cũ (ol.ds-bai). */
ol.luoi-bai { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px }
@media (min-width: 960px) { ol.luoi-bai { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px } }
ol.luoi-bai a { display: grid; gap: 6px; color: var(--s-chu); text-decoration: none }
ol.luoi-bai img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--s-vien); border-radius: 12px; background: var(--s-mat); margin-bottom: 6px }
ol.luoi-bai a:hover img { border-color: var(--s-vien-dam) } ol.luoi-bai a:hover b { text-decoration: underline; text-underline-offset: 3px }
ol.luoi-bai .so { font-size: var(--s-co-1); color: var(--s-nhat); letter-spacing: .02em }
ol.luoi-bai b { font-size: var(--s-co-4); font-weight: 600; line-height: 1.35 }
ol.luoi-bai .mo-ta { font-size: var(--s-co-2); color: var(--s-nhat) }
/* ⊕ 13/10: CÂU HỎI MẪU (/ket-noi · /huong-dan) dùng phông THƯỜNG — phông đơn cách vẽ dấu tiếng Việt lệch («điện tửđầu», đo ảnh /huong-dan 1536);
   địa chỉ connector (#dc, #dc-2) vẫn đơn cách. */
.dia-chi code#cau-hoi { font-family: var(--s-phong) }
/* ⊕ 13/10 Bài 0 (project mỗi công ty): ô Chép chứa MẪU HƯỚNG DẪN nhiều dòng ⇒ giữ xuống dòng; dòng lưu ý «project chỉ tách cuộc trò chuyện» nổi hơn chú thích */
.dia-chi code.nhieu-dong { white-space: pre-wrap; font-size: var(--s-co-2); line-height: 1.6; padding: 6px 0 }
body.huong-dan .luu-y { margin: 24px 0 0; padding: 12px 14px; border: 1px solid var(--s-vien-dam); border-radius: 10px; background: var(--s-mat); font-size: var(--s-co-2) }
/* ⊕ 13/10 (người dùng: «/ket-noi cân đối lại trang»): ≥ 960px mỗi bước HAI CỘT — chữ trái, hình phải phủ phần còn lại; cột trang 920px.
   Bản trước: cột 680px + hình tối đa 440px thụt 34px ⇒ cả khối dạt trái, nửa phải trống. Điện thoại giữ xếp dọc. /huong-dan dùng chung lớp. */
@media (min-width: 960px) {
  body.ket-noi .cot { max-width: 920px }
  body.ket-noi ol.buoc-anh { gap: 32px }
  body.ket-noi ol.buoc-anh > li { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 40px; align-items: start }
  body.ket-noi ol.buoc-anh > li > figure.mh { margin: 0; max-width: none }
}
/* ⊕ V-VN-0427: «Hướng dẫn» hiện cả trên điện thoại ⇒ đầu trang ≤ 420px gọn lại (đo: 320 / 360 tràn ngang, 390 gãy hai dòng): logo chỉ giữ
   biểu tượng S, ẩn «EN» (đổi ngôn ngữ vẫn ở chân trang), liên kết + nút cỡ nhỏ hơn, đệm hẹp. */
@media (max-width: 420px) {
  header .hieu { font-size: 0; gap: 0 }
  header .hieu .logo { height: 16px }   /* ⊕ 13/10: logo chữ rộng hơn ô «S» cũ (~61px ở 16px) ⇒ thu để đầu trang vẫn một dòng */
  header { padding-left: 14px; padding-right: 14px }   /* đo 13/10: 360px tràn 25px, 375px tràn 10px với logo mới */
  header nav a { white-space: nowrap }   /* đo 13/10 ở 390: «Hướng dẫn» / «Đăng nhập» gãy hai dòng khi logo rộng ra */
  header nav a.doi-ngon-ngu { display: none }
  header nav a:not(.nut) { padding: 6px 4px; font-size: var(--s-co-2) }
  header nav .nut { min-height: 32px; padding: 6px 8px; font-size: var(--s-co-2) }
}
/* ⊕ 13/10: logo chữ mới rộng hơn ⇒ ngưỡng ẩn «Đăng nhập» 340 ⇒ 380px (đo: 360 tràn 13px, 375 tràn ~0 sau khi thu logo + đệm). Đăng nhập còn ở luồng «Bắt đầu». */
@media (max-width: 420px) { header nav a[data-nut="dang-nhap"] { display: none } }   /* 320px bản Việt vẫn gãy hai dòng; «Bắt đầu miễn phí» cũng dẫn tới đăng nhập.
   ⊕ 23/10 (V-VN-0475: chữ bấm ≥ 14px): 380 ⇒ 420 — ở 390 đầu trang khách 14px rộng 418px (test-khong-tran đỏ, trang lời mời); bỏ «Đăng nhập»
   ở khổ này chứ không thu chữ hay bỏ «Hướng dẫn» (CT cần lối vào hướng dẫn trên điện thoại, V-VN-0427). */
@media (max-width: 900px) { header nav .nguoi .email { display: none } header nav a.nguoi { padding: 4px } }   /* đã đăng nhập 721–900px: chip email + «Hướng dẫn» gãy hai dòng (đo V-VN-0427) */
/* ⊕ 14/10 — V-VN-0445 (CT: «Làm giống Xero … cho dùng bản free bây giờ»): màn TẠO CÔNG TY (sau đăng ký · Tài khoản › Thêm công ty) — ba ô khách
   TỰ NHẬP, không điền sẵn · trang thanh toán MỘT trang: ô «Có mã giảm giá?» gập (<details>, không JS) · khối thông tin xuất HĐ khách tự nhập. */
.tao-cty form { display: grid; gap: 12px; margin-top: 12px }
.tao-cty label.o, .tt .hd-o label.o { display: grid; gap: 4px; font-size: var(--s-co-2); color: var(--s-nhat) }
.tao-cty label.o input, .tt .hd-o label.o input { width: 100%; min-height: 38px; font-size: var(--s-co-3); color: var(--s-chu) }
.tao-cty label.o textarea, .tt .hd-o label.o textarea { width: 100%; font-size: var(--s-co-3); color: var(--s-chu) }
.tao-cty .hang { display: flex; gap: 8px; margin-top: 8px }
.tt .hd-o { display: grid; gap: 10px }
.tt .hd-o > small { color: var(--s-nhat) }
.tt .ma-giam summary { cursor: pointer; color: var(--s-nhat); font-size: var(--s-co-2); width: max-content }
.tt .ma-giam[open] summary { margin-bottom: 8px }
.tt .ma-giam .hang { display: flex; gap: 8px }
.tt .ma-giam input { flex: 1; min-width: 0; min-height: 38px; font-size: var(--s-co-3); text-transform: uppercase }
.tt label.ma-giam { display: grid; gap: 4px; font-size: var(--s-co-2); color: var(--s-nhat) } .tt label.ma-giam small { display: inline; margin: 0 } .tt label.ma-giam input { width: 100% }   /* ⊕ 20/10 (VP-VN soát lô Cloud ma-giam-web): cổng in <label class="ma-giam"><span>Mã giảm giá <small>(nếu có)</small></span><input></label> — small chung display:block ⇒ «(nếu có)» rơi dòng; label inline ⇒ ô nửa bề ngang ở 390. Mẫu tĩnh dùng hình <details> (luật trên) */
.tt .ma-giam .da-ap { margin: 8px 0 0; font-size: var(--s-co-2); color: var(--s-nhat) }
.tom-tat .giam { color: var(--s-nhan-dam) }
.dong .goi-cty { white-space: nowrap }
/* ⊕ 18/10 — KHUÔN CÀI ĐẶT 7 MỤC (cai-dat-mau/, CT: «học cách làm trang settings của ChatGPT / Claude»). Gắn theo lớp RIÊNG body.cai-dat-7 để trang
   đang chạy (body.cai-dat) không đổi tới khi Cloud dựng khuôn mới. Rà UI 18/10: ① nhãn bị bóp gãy 3 dòng vì .nhan không giãn ⇒ nhãn chiếm phần còn lại,
   cột phải co theo nút; giá trị dài nằm ở dòng xám DƯỚI nhãn · ② nút vàng đầu trang làm mỗi màn có 2+ nút chính ⇒ ở trang cài đặt nó thành nút viền. */
body.cai-dat-7 .dong .nhan { flex: 1 1 auto } body.cai-dat-7 .dong .phai { flex: 0 1 auto }
/* ⊕ 23/10 — V-VN-0474 (VP đo Chrome, Cloud xin): dòng «Sao kê ngân hàng» sau khi kiểm có .nhan > small dài ⇒ .phai bị bóp, nút «⋯» rớt xuống
   dưới «Kéo ngay». Hàng có menu «⋯» thì giữ các nút một hàng, để chữ bên trái gãy dòng. Chỉ trên 720px — dưới đó luật hẹp ở cuối khối giữ nguyên. */
@media (min-width: 721px) { body.cai-dat-7 .dong .phai:has(> details.menu-3c) { flex-wrap: nowrap; flex-shrink: 0 } }
body.cai-dat-7 header nav a.nut.chinh { background: transparent; border-color: var(--s-vien-dam); color: var(--s-chu) }
/* ⊕ 18/10 (sau) CT: «tối giản ít trùng lặp» ⇒ mỗi hàng ≤ 1 nút hiện, còn lại vào menu «⋯» (<details>): bảng nổi bên phải nút, mục đỏ = nguy hiểm
   (mở hộp xác nhận). Ô chọn công ty KHÔNG nhãn: một hàng riêng trên đầu mục. */
body.cai-dat-7 .menu-3c { position: relative } body.cai-dat-7 .menu-3c > summary { list-style: none; min-width: 36px; text-align: center; letter-spacing: .1em }
body.cai-dat-7 .menu-3c > summary::-webkit-details-marker { display: none }
body.cai-dat-7 .menu-ds, header .menu-tk .menu-ds { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 220px; display: grid; padding: 6px; border: 1px solid var(--s-vien);
  border-radius: var(--s-bo); background: var(--s-mat); box-shadow: var(--s-bong) }
body.cai-dat-7 .muc-menu, header .menu-tk .muc-menu { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--s-chu);
  font: inherit; cursor: pointer; text-decoration: none } body.cai-dat-7 .muc-menu:hover, header .menu-tk .muc-menu:hover { background: var(--s-chon) } body.cai-dat-7 .muc-menu.nguy { color: var(--s-nguy) }
body.cai-dat-7 .dong.chon-cty { justify-content: flex-start; min-height: 0 }
/* ⊕ 18/10 Gói & thanh toán: «Lịch sử thanh toán» là một hàng mở ra tại chỗ (<details class="ls-tt">) */
body.cai-dat-7 details.ls-tt > summary { list-style: none; cursor: pointer } body.cai-dat-7 details.ls-tt > summary::-webkit-details-marker { display: none }
body.cai-dat-7 details.ls-tt[open] > summary .phai span { transform: rotate(90deg); display: inline-block } body.cai-dat-7 .dong.chon-cty form { display: contents }
/* điện thoại: dòng giữ nhãn trái · nút / giá trị ngắn phải như Settings của app (bản cũ ép mọi dòng xuống hai tầng); phải dài thì tự rớt dòng */
@media (max-width: 720px) { body.cai-dat-7 .dong { flex-wrap: wrap; align-items: center } body.cai-dat-7 .dong .nhan { width: auto; flex: 1 1 55% }
  body.cai-dat-7 .dong .phai { width: auto; justify-content: flex-end; margin-left: auto } }

/* ⊕ 23/10 — V-VN-0475 B9 (CT «rà soát UI/UX», VP-VN giao): MỘT đầu trang khi đã đăng nhập — logo · Tổng quan · Hướng dẫn · «Kết nối Soluta» ·
   menu tài khoản (<details class="menu-tk">, chạy không cần JS). Markup một nguồn: dau_trang.py:nav_da_dang_nhap. Bảng menu mượn .menu-ds /
   .muc-menu của khuôn Cài đặt 7 mục (cùng một hình «⋯»). Điện thoại: «Hướng dẫn» vào menu, mọi đích bấm cao ≥ 44px (C12). */
header .menu-tk { position: relative }
header .menu-tk > summary { list-style: none; cursor: pointer; border-radius: var(--s-bo); padding: 4px 8px 4px 4px; color: var(--s-chu) }
header .menu-tk > summary::-webkit-details-marker { display: none }
header .menu-tk > summary:hover, header .menu-tk[open] > summary { background: var(--s-chon) }
header .menu-tk > summary:focus-visible { outline: 2px solid var(--s-nhan-dam); outline-offset: 2px }
header .menu-tk .menu-ds { z-index: 30; top: calc(100% + 6px); min-width: 200px }
header .menu-tk form { margin: 0 }
header .menu-tk .chi-hep { display: none }
header .menu-tk .chi-rat-hep { display: none }
@media (max-width: 380px) { header nav.dau-tk > a.nut.chinh { display: none } header .menu-tk .chi-rat-hep { display: flex } }   /* ⊕ 23/10: chữ bấm 14px ⇒ 320px tràn */
header nav.dau-tk a[aria-current="page"] { color: var(--s-chu); font-weight: 500 }
@media (max-width: 720px) {
  header nav.dau-tk a.hd { display: none } header .menu-tk .chi-hep { display: block }
  header nav.dau-tk > a, header nav.dau-tk .menu-tk > summary { min-height: 44px; display: inline-flex; align-items: center }
  header nav.dau-tk > a.nut { min-height: 44px }
  header .menu-tk .muc-menu { min-height: 44px; align-items: center } header .menu-tk .muc-menu:not(.chi-rat-hep) { display: flex }
}
/* ⊕ 24/10 — V-VN-0479 (VP-VN: Tổng quan khổ 768px): máy tính bảng là NGÓN TAY dù rộng > 720px — đo 768 trên mẫu Tổng quan v2: đầu trang
   33px, «Ẩn số liệu» / «Tuỳ chỉnh» 32px, «Hỏi AI» 28px, số bấm được 19–34px. Các khối CHỈ NÂNG VÙNG CHẠM (không đổi bố cục) nay áp thêm
   (pointer: coarse); khối trên lẫn luật bố cục (Hướng dẫn vào menu) nên chỉ chép phần cỡ. Chuột (pointer: fine) giữ nguyên máy tính. */
@media (pointer: coarse) {
  header nav.dau-tk > a, header nav.dau-tk .menu-tk > summary { min-height: 44px; display: inline-flex; align-items: center }
  header .menu-tk .muc-menu { min-height: 44px; align-items: center }
}
/* ⊕ 23/10 — V-VN-0475 C12 (VP: «nút ≥ 44px» ở điện thoại): đo 390px trên 15 trang mẫu — nút / ô chọn / ô nhập 32px, «‹ Cài đặt» 21px, logo 16px.
   ≤ 720px nâng mọi đích bấm chuẩn lên 44px (ngón tay, không phải chuột). Đặt CUỐI tệp để thắng các luật hẹp riêng của đầu trang. Chưa phủ:
   nút biểu tượng «Hỏi AI» góc thẻ Tổng quan (28px — nở ra là đè số) và số bấm được trong thẻ. */
@media (max-width: 720px), (pointer: coarse) {
  .nut, header nav .nut, select, input:not([type=hidden]):not([type=checkbox]):not([type=radio]), a.quay, header a.hieu { min-height: 44px }
  a.quay, header a.hieu { display: inline-flex; align-items: center }
}
/* ⊕ 23/10 — V-VN-0475 C12, VP-VN chốt: GIỮ 12–13px cho chú thích / nhãn phụ (không đổi thang chữ cả hệ); nội dung đọc chính + MỌI CHỮ BẤM ĐƯỢC
   ≥ 14px. Đo 15 trang mẫu × 390/768: nút, ô nhập, ô chọn, liên kết đầu / chân trang, mục menu, «⋯» đang 12–13px. Ngoại lệ có tên: liên kết NẰM
   TRONG một câu chú thích (vd «Điều khoản sử dụng» trong dòng đồng ý 12px) đi theo cỡ câu — phóng riêng nó là vỡ câu; số bấm được của thẻ Tổng
   quan (.so-truy) theo cỡ số của thẻ. Máy tính và điện thoại cùng luật. */
.nut, header nav a, header nav a:not(.nut):not(.doi-ngon-ngu), header nav .nut, header nav a.doi-ngon-ngu, .muc-menu, a.quay, select,
input:not([type=hidden]), textarea, .chan a, footer a, a.thanh-uu-dai, button[role="tab"] { font-size: var(--s-co-3) }
.chan .chu-quan a, footer .chu-quan a { font-size: inherit }
header .menu-tk > summary .email { font-size: var(--s-co-3) }   /* chip email (máy tính > 900px) là chữ bấm được; chữ cái avatar .anh là hình, giữ 12px */
@media (max-width: 720px) { header nav a:not(.nut):not(.doi-ngon-ngu), header nav .nut { font-size: var(--s-co-3) } }
/* ⊕ 23/10 — VP-VN chốt: CHỈ ≤ 720px, phần đích bấm còn thấp — nút hero trang chủ (36px), thẻ Claude / ChatGPT ở /ket-noi (30px), nút đăng nhập
   (40px). Máy tính giữ nguyên. */
@media (max-width: 720px), (pointer: coarse) {
  .hang-nut .nut, header .nut, .the-vao button:not(.nhin), .the-vao .nut-email, .the-vao a.nut, .nut-google, .nut-zalo, .nut-email, button[role="tab"] { min-height: 44px }
}
/* ⊕ 24/10 — trang cổng còn đầu trang khách KIỂU CŨ (vd /suc-khoe-thue/mau: «Đăng nhập» không data-nut, 33px ở 390) ⇒ ≤ 720px mọi liên kết trần
   trong nav đầu trang cao 44px. Các luật ẩn (an-hep, data-nut, doi-ngon-ngu, dau-tk a.hd) cụ thể hơn nên vẫn thắng display ở đây. */
@media (max-width: 720px), (pointer: coarse) { header nav > a { min-height: 44px; display: inline-flex; align-items: center } }
@media (max-width: 360px) { header nav .nut { padding-inline: 6px } }   /* 320: đầu trang khách 14px lố 1px (đo 24/10); luật ≤720 đặt 8px */