/* sol-nen.css · Nền thiết kế dùng chung cho lab Solatic (đợt 5, 28/09/2026)
   Nạp SAU mọi CSS sẵn có của trang (index.html, ra-soat-ban-thao.html,
   du-an.html, ngu-lieu.html). Solatic Design KHÔNG nạp tệp này, và tệp này
   không sửa giá trị nào của solatic-brand.css: token mới đều có tiền tố
   --sol-s-, --sol-khung, --sol-le, --sol-do-dong, --sol-nut-nen.
   Thang khoảng cách trùng HUB (sl-nen.css): 4, 8, 12, 16, 24, 32, 48, 64, 96. */

/* ===== 1. Token ===== */
:root{
  --sol-s-1:4px; --sol-s-2:8px; --sol-s-3:12px; --sol-s-4:16px; --sol-s-5:24px;
  --sol-s-6:32px; --sol-s-7:48px; --sol-s-8:64px; --sol-s-9:96px;
  --sol-khung:1200px;                 /* một độ rộng khung cho mọi phân hệ */
  --sol-le:clamp(16px,4vw,24px);      /* lề ngang: 390 là 16, từ 600 là 24 */
  /* Độ rộng dòng đoạn giải thích. Đặc tả gợi ý 72ch, nhưng "ch" là bề rộng
     chữ số 0 nên với chữ Việt Inter 15 đến 16 px, 72ch đo được 96 đến 104 ký
     tự một dòng; 60ch vẫn còn 80 đến 86. 55ch cho khoảng 72 đến 79 ký tự,
     đạt ngưỡng ≤ 80. */
  --sol-do-dong:55ch;
  --sol-nut-nen:#0E5F55;              /* nền nút đặc chữ trắng, 7,3:1 */
  --sol-nut-nen-hover:#15352C;
  --sol-chu-san:12px;                 /* sàn chữ; nhãn chữ hoa giãn chữ 11 px */
  --sol-dau-cao:64px; --sol-dau-cao-hep:56px;
  --sol-nut-cao:44px;
  --sol-focus:var(--sol-amber,#A8843A);
}

/* ===== 2. Khung ===== */
.wrap{box-sizing:border-box;width:100%;max-width:var(--sol-khung);margin-inline:auto;padding-inline:var(--sol-le)}
/* Chống nhảy bố cục: vùng nội dung luôn cao ít nhất một màn, nên chân trang
   nằm dưới mép màn ngay từ đầu, không bị đẩy xuống khi dữ liệu vẽ xong
   (nguồn CLS chính đo được: chân trang trượt từ y 129 xuống 693). */
body > main{min-height:calc(100vh - var(--sol-dau-cao));display:flow-root}
/* App: .wrap của admin.css đè padding-top của main về 0, lề trên của #nav
   (4 px) tràn ra ngoài main và làm main nhảy 4 px khi #nav có nội dung. */
body > main:has(> #app){padding-top:var(--sol-s-4)}

/* ===== 3. Đầu trang chung =====
   Một cấu trúc cho app, Rà soát, Ngữ liệu trang rời: logo SocialLife 26 px,
   vạch, biểu tượng Solatic 40 px trong ô trắng, "Solatic" Fraunces 21/700,
   dòng phụ Inter 12,5; một hàng, cao 64 (dưới 640 px: 56, bỏ dòng phụ).
   Bộ chọn kép (.wrap.row.between, .wrap.hdr-row) để thắng các quy tắc cũ
   cùng độ ưu tiên trong admin.css và trang. */
.site-header .wrap.row.between,.site-header .wrap.hdr-row{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:var(--sol-s-3);
  /* Cao cố định (không chỉ min-height): menu tài khoản, chữ phiên bản hay
     phông web nạp muộn không làm đầu trang cao thêm vài px và đẩy cả trang. */
  box-sizing:border-box;height:var(--sol-dau-cao);min-height:0;padding-block:0;row-gap:0}
.site-header .hdr-left{display:flex;align-items:center;gap:var(--sol-s-3);min-width:0;flex:0 1 auto}
.site-header .hdr-left .sl-lead img,.site-header .sl-lead img{height:26px;width:auto;display:block}
.site-header .sol-div{width:1px;height:32px;margin:0 2px;opacity:.2;background:currentColor;flex:0 0 auto}
.site-header .sol-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:11px;background:#fff;border:1px solid rgba(19,33,30,.12);box-shadow:none;flex:0 0 auto}
.site-header .sol-icon svg{width:28px;height:28px;display:block}
.site-header .sol-word{font-family:var(--sol-font-display);font-size:21px;font-weight:700;letter-spacing:0;line-height:1.1;white-space:nowrap}
.site-header .sol-tag{font-family:var(--sol-font-body);font-size:12.5px;font-weight:500;line-height:1.3;
  color:var(--sol-muted,#5E6B63);opacity:1;margin-top:1px;white-space:nowrap}
.site-header .who{display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:var(--sol-s-2);min-width:0}
@media (max-width:640px){
  .site-header .wrap.row.between,.site-header .wrap.hdr-row{height:var(--sol-dau-cao-hep);gap:var(--sol-s-2)}
  .site-header .hdr-left{gap:var(--sol-s-2)}
  .site-header .sol-tag{display:none}
  .site-header .hdr-left .sl-lead img,.site-header .sl-lead img{height:22px}
  .site-header .sol-div{height:28px;margin:0}
  .site-header .sol-icon{width:36px;height:36px;border-radius:10px}
  .site-header .sol-icon svg{width:24px;height:24px}
  .site-header .sol-word{font-size:19px}
}
.site-header .sol-word{overflow:hidden;text-overflow:ellipsis}
@media (max-width:420px){
  /* Màn rất hẹp (390): không đủ chỗ cho cả logo SocialLife, biểu tượng, tên
     Solatic và các nút bên phải; chữ "Solatic" bị nút đè. Giữ biểu tượng và
     tên Solatic, ẩn logo mẹ và vạch (logo SocialLife vẫn có ở chân trang). */
  .site-header .sl-lead,.site-header .sol-div,.site-header .sol-eco-sep{display:none}
}

/* ===== 4. Chân trang ===== */
.sol-footer .wrap.sol-footer-in{padding-block:var(--sol-s-5)}
.sol-footer-cite,.sol-footer #appver{font-family:var(--sol-font-mono);font-size:12px;color:var(--sol-muted,#5E6B63);line-height:1.5}
/* #appver ở admin.css mang font-size:11px !important và nền tối; ở chân trang đặt lại. */
.sol-footer #appver{display:block;margin-top:var(--sol-s-1);background:none;border:0;padding:0;opacity:1;font-size:12px!important;color:var(--sol-muted,#5E6B63)!important}
.sol-footer-meta{font-size:12.5px;color:var(--sol-muted,#5E6B63)}

/* ===== 5. Nút ===== */
:where(.btn-primary){min-height:var(--sol-nut-cao)}
:where(.btn-ghost:not(.sm)){min-height:var(--sol-nut-cao)}

/* ===== 6. Độ dài dòng: đoạn giải thích trong vùng nội dung ===== */
/* Kiểm chứng đợt 5: chỉ đoạn văn giải thích và mục của danh sách văn xuôi (ul/ol không
   mang lớp); không chạm li của menu, thẻ, sổ mã, danh sách có lớp riêng. */
main p,main dd,main .q-hint,main div.muted,main .tnote,main .sl-guide-bd,main :is(ul,ol):not([class]) > li{max-width:var(--sol-do-dong)}
main td p,main th p,main td li{max-width:none}

/* ===== 7. Focus bàn phím =====
   Ô nhập ở nhiều phân hệ tắt outline và chỉ đổi màu viền; thêm vòng mềm
   vàng đồng để vẫn thấy rõ vị trí focus. */
:where(a,button,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2.5px solid var(--sol-focus);outline-offset:2px}
:where(input,select,textarea):focus-visible{box-shadow:0 0 0 3px rgba(168,132,58,.38)}

/* ===== 8. Phần nổi: chừa đáy để nút "Tư vấn" không che dòng cuối ===== */
body:has(.slt-launch) main{padding-bottom:88px}
/* Kiểm chứng đợt 5: trên màn hẹp hai nút nổi xếp chồng (Tư vấn đáy 18, liên thông
   đáy 70, cao 44) chiếm 114 px ở góc phải dưới; chừa đáy chân trang để cuộn tới cuối
   không nút nào đè liên kết chân trang. */
/* Nút Tư vấn đứng sát đáy ở mọi trang lab (như index.html), để thẻ liên thông
   (đáy 70) nằm ngay trên nó thay vì đè lên nó ở du-an.html (mặc định đáy 76). */
body .slt-launch{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
@media (max-width:1023px){body:has(.slt-launch) .sol-footer{padding-bottom:calc(128px + env(safe-area-inset-bottom,0px))}}

/* ===== 9. Hộp thoại dùng chung (scripts/hop-thoai.js) ===== */
.slh-nen{position:fixed;inset:0;z-index:100050;background:rgba(18,33,30,.42);display:flex;align-items:center;justify-content:center;padding:var(--sol-s-4)}
.slh-hop{background:#fff;color:var(--sol-ink,#16261F);border-radius:14px;box-shadow:0 24px 60px -18px rgba(10,40,36,.45);
  width:min(480px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:var(--sol-s-5);font:15px/1.6 var(--sol-font-body)}
.slh-hop h2{font-family:var(--sol-font-display);font-size:20px;font-weight:600;line-height:1.3;margin:0 0 var(--sol-s-3)}
.slh-noi{white-space:pre-line;margin:0 0 var(--sol-s-4);max-width:var(--sol-do-dong)}
.slh-hop label{display:block;font-size:13.5px;font-weight:600;margin:0 0 var(--sol-s-2)}
.slh-hop input[type=text]{width:100%;box-sizing:border-box;min-height:44px;font:inherit;padding:10px 12px;border:1.5px solid var(--sol-mist,#E5DFD0);border-radius:10px}
.slh-nut{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--sol-s-2);margin-top:var(--sol-s-5)}
.slh-nut button{min-height:44px;padding:0 var(--sol-s-5);border-radius:10px;font:600 15px/1.2 var(--sol-font-body);cursor:pointer}
.slh-huy{background:#fff;color:var(--sol-teal-deep,#0E5F55);border:1.5px solid var(--sol-mist,#E5DFD0)}
.slh-huy:hover{border-color:var(--sol-teal-deep,#0E5F55)}
.slh-dongy{background:var(--sol-nut-nen);color:#fff;border:1.5px solid var(--sol-nut-nen)}
.slh-dongy:hover{background:var(--sol-nut-nen-hover)}
.slh-dongy.slh-nguy{background:var(--sol-danger,#8A2E1C);border-color:var(--sol-danger,#8A2E1C)}
.slh-dongy.slh-nguy:hover{background:var(--sol-danger-ink,#6D2415)}
.slh-bao{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:100040;
  display:flex;flex-direction:column;gap:var(--sol-s-2);width:max-content;max-width:min(560px,calc(100vw - 32px));pointer-events:none}
.slh-bao>div{pointer-events:auto;background:#fff;border:1px solid var(--sol-mist,#E5DFD0);border-left:4px solid var(--sol-teal,#1E8E80);
  border-radius:10px;box-shadow:0 12px 30px -12px rgba(10,40,36,.35);padding:10px 14px;font:14px/1.5 var(--sol-font-body);color:var(--sol-ink,#16261F)}
.slh-bao>div.loi{border-left-color:var(--sol-danger,#8A2E1C);background:var(--sol-danger-soft,#F7E3DD);color:var(--sol-danger-ink,#6D2415)}
.sol-an{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== 10. Thanh chip phân hệ (L2) và mật độ Qual trên màn hẹp (QL2, QL5, QL6) =====
   Lối tắt do đoạn mã cuối index.html thêm vào; ở đây chỉ là kiểu và điểm ngắt.
   Bộ chọn mở đầu bằng "body #qual-root" để thắng CSS qual.js chèn lúc chạy. */
.sol-ss-mo{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sol-subsys .sol-ss{position:relative}   /* giữ .sol-ss-mo trong chip, không làm trang tràn ngang */
@media (min-width:1024px){.sol-subsys{flex-wrap:wrap!important;overflow-x:visible!important}}
@media (max-width:1023px){.sol-subsys{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:28px}}
body #qual-root .q-ten-du-an + .q-mini{border:0;background:none;padding:0;min-height:0;margin-top:2px}
body #qual-root .q-banner:not(.q-ro){background:var(--sol-haze,#F2F5F3);border:0;border-left:3px solid var(--co,#C75B3F);border-radius:0 10px 10px 0;color:var(--sol-ink,#16261F)}
.q-tab-chon-wrap,.q-dau-gon-nut{display:none}
.q-them-du-an{position:relative}
.q-them-du-an>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  border:1.5px solid var(--sol-mist,#E5DFD0);border-radius:10px;background:#fff;color:var(--sol-teal-deep,#0E5F55);font-weight:700;font-size:18px;cursor:pointer}
.q-them-du-an>summary::-webkit-details-marker{display:none}
.q-them-bang{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:240px;background:#fff;border:1px solid var(--sol-mist,#E5DFD0);
  border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.16);padding:6px}
.q-them-bang .srow-more-item{min-height:44px}
body #qual-root .q-nut-hoi{min-width:44px;min-height:44px;padding:0;font-weight:700}
@media (max-width:768px){
  #nav{flex-wrap:nowrap!important;gap:var(--sol-s-2)}
  #nav>.btn-ghost{flex:0 0 auto;white-space:nowrap}
  #nav>.sol-subsys{flex:1 1 auto;min-width:0}
  body #qual-root > .q-tabs.q-co-chon{display:none}
  body #qual-root > .q-tab-chon-wrap{display:flex;align-items:center;gap:var(--sol-s-2);margin:0 0 var(--sol-s-3)}
  body #qual-root > .q-tab-chon-wrap>span{font-size:13px;font-weight:600;color:var(--sol-muted,#5E6B63);flex:0 0 auto}
  body #qual-root > .q-tab-chon-wrap>select{flex:1 1 auto;min-height:44px;font:600 15px/1.2 var(--sol-font-body)}
  body #qual-root > .q-dau-gon{flex-wrap:nowrap!important;align-items:flex-start!important}
  body #qual-root > .q-dau-gon > .q-dau-nut{display:none!important}
  body #qual-root > .q-dau-gon > .q-dau-gon-nut{display:flex;gap:var(--sol-s-2);flex:0 0 auto}
  body #qual-root > .q-hd-mo{display:none}
  /* Dòng nguồn (tên, huy hiệu, 4 nút) không xuống dòng làm trang tràn ngang 185 px ở 390. */
  body #qual-root .q-codeitem:not(.q-codelist .q-codeitem){flex-wrap:wrap;row-gap:var(--sol-s-2)}
  body > main:has(> #app){padding-top:var(--sol-s-2)}
  #nav{margin-bottom:var(--sol-s-3)}
}
@media (max-width:640px){
  body #qual-root .q-ten-du-an{font-size:16.5px!important;line-height:1.3}
  body #qual-root > .q-dau-gon{margin-bottom:var(--sol-s-2)!important}
}

/* Ngữ liệu trong app (N1, N3): cột nội dung bắt đầu cùng mép trái với nút
   lùi và thanh chip (thay vì cột 920 căn giữa); độ dài dòng giới hạn ở đoạn
   chữ; nhãn sàn 12 px, nhãn chữ hoa giãn chữ 11 px. */
body #ngulieu-root{max-width:none;margin:0}
body #ngulieu-root .badge,body #ngulieu-root .pill-duong,body #ngulieu-root .kbd,body #ngulieu-root .nl-buoc-so{font-size:12px}
body #ngulieu-root .may-tag{font-size:11px}
body #ngulieu-root p,body #ngulieu-root .muted:not(span),body #ngulieu-root .hd-body{max-width:var(--sol-do-dong)}

/* ===== 11. Tương phản trong Qual: nút chữ trắng dùng nền teal đậm ===== */
body #qual-root .q-btnadd{background:var(--sol-nut-nen)}
/* Ba chỗ chữ dưới 4,5:1 đo được ở Qual (màu đặt trong qual.js): công tắc
   "Chế độ toàn văn" đang chọn (chữ trắng trên san hô 4,2), nút "Rà sổ mã"
   (chữ trắng trên #2A9D8F 3,3), dòng "Theo ..." (chữ phụ trên nền kẻ 4,2). */
body #qual-root .q-modetog button.on{background:var(--co-deep,#9B3F28);border-color:var(--co-deep,#9B3F28);color:#fff}
body #qual-root button.btn-ghost[style*="#2A9D8F"]{background:var(--sol-nut-nen)!important;border-color:var(--sol-nut-nen)!important}
body #qual-root .q-mini[style*="--sol-mist"]{color:var(--sol-ink,#16261F)}
/* QL8: huy hiệu đếm ở sổ mã sàn 12 px. */
body #qual-root .q-chipcount,body #qual-root .q-codeitem .q-cnt,body #qual-root .q-badge{font-size:12px}

/* ===== 12. Giảm chuyển động ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}