/* ============================================================
   KQT — TRANG PHÁP LÝ / QUY CHẾ HOẠT ĐỘNG
   Long-form legal doc: sticky TOC + article + bảng quy định
   Bám tokens.css + base.css
   ============================================================ */

/* Nếu không khai rõ nền — trình duyệt/OS ở Dark Mode sẽ tự đoán nền tối cho
   phần canvas ngoài nội dung (heuristic color-scheme mặc định), làm cả trang
   trông như phủ lớp đen dù CSS nội dung vẫn đúng. color-scheme:light chặn
   heuristic đó, background:var(--white) là lưới an toàn thứ hai. Cùng rule
   đã có ở kqt-bao-hanh.css / kqt-lien-he.css / kqt-catalogue.css /
   kqt-service.css / kqt-about.css — file này trước đó bị sót. */
body.kqt-legal{ background:var(--white); color-scheme:light; }
html:has(body.kqt-legal){ background:var(--white); color-scheme:light; }

/* breadcrumb */
.crumb{ padding:18px 0 4px; }
.crumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:13px; color:var(--taupe); }
.crumb li{ display:flex; align-items:center; gap:8px; }
.crumb li::after{ content:"›"; color:var(--gold); font-size:14px; }
.crumb li:last-child::after{ display:none; }
.crumb li[aria-current]{ color:var(--ink-2); font-weight:600; }
.crumb a{ color:var(--taupe); transition:color .2s; }
.crumb a:hover{ color:var(--gold-dark); }

/* ============ HERO ============ */
/* 2026-09-15: ảnh hero từng "biến mất" (khối navy đặc) dù $bg_url có giá trị
   hợp lệ. Thủ phạm KHÔNG phải thiếu ảnh mà là 1 rule inline sitewide
   "body.kqt-chrome .ph{position:relative;...}" (specificity 0,2,1) đè mất
   position:absolute của .ph ở đây (specificity cũ chỉ 0,2,0) → .ph co cao về
   0px → ảnh position:absolute;inset:0 bên trong cũng co theo. Phải nâng độ
   đặc hiệu lên ≥3 class (.lg-hero .lg-hero__bg .ph) mới thắng. */
.lg-hero{ position:relative; background:var(--navy); overflow:hidden; }
.lg-hero__bg{ position:absolute; inset:0; z-index:0; }
.lg-hero .lg-hero__bg .ph{ position:absolute; inset:0; }
.lg-hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.4; }
.lg-hero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,#0B1626 8%,rgba(11,22,38,.9) 42%,rgba(11,22,38,.4) 100%); }
.lg-hero .wrap{ position:relative; z-index:2; }
.lg-hero__in{ padding-block:clamp(36px,5vw,64px); max-width:66ch; }
.lg-hero .eyebrow{ color:var(--gold-light); }
.lg-hero h1{ font-size:clamp(28px,3.9vw,46px); font-weight:800; line-height:1.14; color:#fff;
  letter-spacing:-.01em; margin:16px 0 16px; text-wrap:balance; }
.lg-hero p{ font-size:clamp(15px,1.25vw,17.5px); color:rgba(244,241,233,.84); line-height:1.68; }
.lg-hero__meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.lg-hero__meta span{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500;
  color:var(--on-navy); padding:8px 15px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(244,241,233,.16); }
.lg-hero__meta svg{ width:14px; height:14px; stroke:var(--gold-light); fill:none; stroke-width:2; flex:none; }

/* ============ BODY: TOC + ARTICLE ============ */
.lg-body{ display:grid; grid-template-columns:274px 1fr; gap:clamp(28px,3.6vw,56px); align-items:start;
  padding-block:clamp(36px,4.6vw,64px); }

/* sticky TOC */
.lg-toc{ position:sticky; top:96px; background:var(--white); border:1px solid var(--taupe-15);
  border-radius:var(--radius-lg); padding:22px 20px; max-height:calc(100vh - 128px); overflow-y:auto; }
.lg-toc__h{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--taupe); padding-bottom:12px; margin-bottom:6px; border-bottom:1px solid var(--taupe-10); }
.lg-toc ol{ list-style:none; margin:0; padding:0; }
.lg-toc a{ display:flex; gap:10px; padding:9px 0; font-size:13.8px; color:var(--ink-2); line-height:1.45;
  transition:color .2s; }
.lg-toc a i{ font-style:normal; flex:none; width:22px; font-size:11.5px; font-weight:700; color:var(--taupe);
  font-variant-numeric:tabular-nums; padding-top:2px; }
.lg-toc a:hover{ color:var(--gold-dark); }
.lg-toc a:hover i{ color:var(--gold-dark); }
.lg-toc a.is-on{ color:var(--navy); font-weight:600; }
.lg-toc a.is-on i{ color:var(--gold-dark); }
.lg-toc__foot{ margin-top:16px; padding-top:16px; border-top:1px solid var(--taupe-10); }
.lg-toc__foot span{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--taupe); }
.lg-toc__foot b{ display:block; margin-top:6px; font-size:17px; font-weight:800; color:var(--navy);
  font-variant-numeric:tabular-nums; }
.lg-toc__foot b a{ color:var(--navy); padding:0; display:inline; font-size:inherit; }
.lg-toc__foot b a:hover{ color:var(--gold-dark); }

/* article */
.lg-art{ min-width:0; }
.lg-part{ scroll-margin-top:110px; }
.lg-part + .lg-part{ margin-top:clamp(36px,4vw,56px); padding-top:clamp(32px,3.6vw,48px);
  border-top:1px solid var(--taupe-15); }
.lg-part__bar{ display:flex; align-items:center; gap:14px; margin-bottom:8px; }
.lg-part__n{ flex:none; height:30px; padding:0 13px; border-radius:999px; display:inline-flex; align-items:center;
  background:var(--gold-grad); color:#2A2008; font-size:11.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; }
.lg-part > h2{ font-size:clamp(23px,2.7vw,34px); font-weight:700; color:var(--navy); line-height:1.2;
  text-wrap:balance; }
.lg-part__lead{ margin-top:14px; font-size:15.5px; color:var(--ink-2); line-height:1.78; max-width:76ch; }

.lg-sec{ margin-top:clamp(24px,2.6vw,34px); scroll-margin-top:110px; }
.lg-sec > h3{ display:flex; align-items:baseline; gap:11px; font-size:clamp(18px,1.9vw,22px);
  font-weight:700; color:var(--navy); line-height:1.34; }
.lg-sec > h3 em{ font-style:normal; color:var(--gold-dark); font-weight:800; flex:none; }
.lg-sec > h4{ margin-top:22px; font-size:16px; font-weight:700; color:var(--navy); line-height:1.4; }
.lg-sec p{ margin-top:12px; font-size:15px; color:var(--ink-2); line-height:1.78; max-width:78ch; }
.lg-sec p b, .lg-sec li b{ color:var(--navy); font-weight:600; }
.lg-sec a{ color:var(--gold-dark); font-weight:600; }
.lg-sec a:hover{ text-decoration:underline; }

/* danh sách gạch đầu dòng */
/* KHÔNG dùng display:flex ở đây — <li> chứa lẫn text node và <b>, nếu đặt
   flex thì mỗi đoạn text/thẻ <b> bị tách thành 1 flex item riêng, co lại
   nowrap và tự xuống dòng độc lập → chữ bị vỡ thành từng cột lệch tùm lum.
   Dùng position:relative + padding-left cho <li>, chấm tròn positioned
   absolute (mẫu an toàn đã dùng ở kqt-product.css .desc__list). */
.lg-ul{ list-style:none; margin:14px 0 0; display:grid; gap:10px; }
.lg-ul li{ position:relative; padding-left:20px; font-size:15px; color:var(--ink-2); line-height:1.74; }
.lg-ul li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%;
  background:var(--gold-grad); }

/* danh sách đánh số */
/* Cùng lỗi flex-trên-nội-dung-hỗn-hợp như .lg-ul: <li> chứa lẫn text node và
   <b> làm con trực tiếp → nếu display:flex, mỗi đoạn tách thành 1 flex item
   riêng, tự xuống dòng độc lập, vỡ thành cột lệch. Đổi sang position:relative
   + padding-left cho <li>, số thứ tự đặt position:absolute. */
.lg-ol{ list-style:none; margin:14px 0 0; display:grid; gap:0; counter-reset:lg; }
.lg-ol > li{ counter-increment:lg; position:relative; padding:13px 0 13px 40px; font-size:15px;
  color:var(--ink-2); line-height:1.74; }
.lg-ol > li + li{ border-top:1px solid var(--taupe-10); }
.lg-ol > li::before{ content:counter(lg,decimal-leading-zero); position:absolute; left:0; top:14px; width:26px;
  font-size:12.5px; font-weight:800; color:var(--gold-dark); font-variant-numeric:tabular-nums; }

/* danh sách ĐƯỢC / KHÔNG ĐƯỢC */
.lg-cond{ display:grid; grid-template-columns:1fr 1.22fr; gap:20px; margin-top:20px; align-items:start; }
.lg-col{ background:var(--white); border:1px solid var(--taupe-15); border-radius:var(--radius-lg); overflow:hidden; }
.lg-col__h{ display:flex; align-items:center; gap:13px; padding:18px 22px; border-bottom:1px solid var(--taupe-10); }
.lg-col__h span{ width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; }
.lg-col__h span svg{ width:20px; height:20px; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lg-col__h b{ font-size:17px; font-weight:700; color:var(--navy); line-height:1.3; }
.lg-col__h small{ display:block; margin-top:3px; font-size:12.5px; font-weight:500; color:var(--ink-3); }
.lg-col--ok .lg-col__h{ background:linear-gradient(180deg,var(--gold-tint),transparent); }
.lg-col--ok .lg-col__h span{ background:var(--gold-grad); }
.lg-col--ok .lg-col__h span svg{ stroke:#2A2008; }
.lg-col--no .lg-col__h{ background:linear-gradient(180deg,#FBF1EF,transparent); }
.lg-col--no .lg-col__h span{ background:#F3DEDA; }
.lg-col--no .lg-col__h span svg{ stroke:#9A3E31; }
.lg-clist{ list-style:none; margin:0; padding:6px 0; }
.lg-clist li{ display:flex; gap:13px; padding:13px 22px; font-size:14.5px; color:var(--ink-2); line-height:1.66; }
.lg-clist li + li{ border-top:1px solid var(--taupe-10); }
.lg-clist__n{ flex:none; width:22px; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; padding-top:2px; }
.lg-col--ok .lg-clist__n{ color:var(--gold-dark); }
.lg-col--no .lg-clist__n{ color:#9A3E31; }

/* quy trình bước */
.lg-steps{ list-style:none; margin:20px 0 0; display:grid; gap:0; }
.lg-step{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding:18px 0; }
.lg-step + .lg-step{ border-top:1px solid var(--taupe-10); }
.lg-step__n{ width:44px; height:44px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--gold-grad); color:#2A2008; font-size:15px; font-weight:800;
  font-variant-numeric:tabular-nums; box-shadow:var(--shadow-gold); }
.lg-step__c{ min-width:0; }
/* Chỉ tiêu đề bước (thẻ <b> con TRỰC TIẾP, đứng ngay đầu .lg-step__c) mới
   cần tách dòng riêng làm heading. Nếu chọn "b" chung chung (không > ) thì
   nó ăn luôn mọi <b> nằm sâu bên trong — kể cả <b><a>số điện thoại/email</a></b>
   trong <ul class="lg-ul"> lồng bên trong — ép chúng xuống dòng riêng, dấu
   "." phía sau bị rớt xuống dòng thứ 3 một mình. */
.lg-step__c > b{ display:block; font-size:16.5px; font-weight:700; color:var(--navy); line-height:1.34; }
.lg-step__c p{ margin-top:7px; }
.lg-step__c .lg-ul{ margin-top:10px; }

/* bảng quy định */
.lg-tblwrap{ margin-top:20px; border:1px solid var(--taupe-15); border-radius:var(--radius-lg);
  overflow:hidden; background:var(--white); }
.lg-tbl{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.lg-tbl caption{ caption-side:top; text-align:left; padding:16px 20px; font-size:13.5px; font-weight:600;
  color:var(--ink-3); background:var(--cream); border-bottom:1px solid var(--taupe-15); }
.lg-tbl th, .lg-tbl td{ padding:14px 18px; text-align:left; font-size:14px; line-height:1.6;
  border-top:1px solid var(--taupe-10); vertical-align:top; }
/* Flatsome (theme cha) có sẵn "td:first-child,th:first-child{padding-left:0}"
   cùng độ đặc hiệu với rule trên → cột đầu tiên mất padding-left, chữ dính sát
   viền trái. Ép rõ lại bằng selector đặc hiệu cao hơn (class + :first-child). */
.lg-tbl th:first-child, .lg-tbl td:first-child{ padding-left:18px; }
.lg-tbl thead th{ border-top:0; background:var(--navy); color:var(--on-navy); font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; }
.lg-tbl tbody th{ width:150px; font-size:13.5px; font-weight:700; color:var(--navy); background:var(--cream); }
.lg-tbl td{ color:var(--ink-2); }
.lg-tbl td b{ color:var(--navy); font-weight:700; }
.lg-tbl td.is-em{ color:var(--gold-dark); font-weight:700; }
.lg-tbl td.is-no{ color:#9A3E31; font-weight:600; }

/* khối lưu ý */
.lg-note{ margin-top:22px; padding:24px 26px; background:var(--gold-tint);
  border:1px solid rgba(154,116,42,.22); border-radius:var(--radius-lg); }
.lg-note h4{ display:flex; align-items:center; gap:11px; margin:0; font-size:15.5px; font-weight:800; color:var(--navy); }
.lg-note h4 svg{ width:18px; height:18px; stroke:var(--gold-dark); fill:none; stroke-width:1.9; flex:none; }
.lg-note p{ margin-top:11px; font-size:14.5px; color:var(--ink-2); line-height:1.76; max-width:78ch; }
.lg-note .lg-ul{ margin-top:12px; }
.lg-note .lg-ul li{ font-size:14.5px; }

/* thẻ thông tin liên hệ */
.lg-info{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:20px; }
.lg-info--3{ grid-template-columns:repeat(3,1fr); }
.lg-infoc{ padding:22px; background:var(--white); border:1px solid var(--taupe-15); border-radius:var(--radius-lg); }
.lg-infoc span{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-dark); }
.lg-infoc b{ display:block; margin-top:7px; font-size:16px; font-weight:700; color:var(--navy); line-height:1.5; }
.lg-infoc b a{ color:var(--navy); font-weight:700; }
.lg-infoc b a:hover{ color:var(--gold-dark); }
.lg-infoc small{ display:block; margin-top:5px; font-size:13px; color:var(--ink-3); line-height:1.55; }

/* hiệu lực */
.lg-effect{ margin-top:clamp(32px,3.6vw,48px); padding:clamp(22px,2.6vw,30px);
  background:var(--navy); border-radius:var(--radius-lg); }
.lg-effect h3{ font-size:19px; font-weight:700; color:#fff; }
.lg-effect p{ margin-top:12px; font-size:14.5px; color:var(--on-navy-2); line-height:1.78; max-width:80ch; }
.lg-effect p b{ color:var(--gold-light); }

/* ============ CTA CUỐI ============ */
.lg-cta{ background:var(--gold-tint); border-top:1px solid rgba(154,116,42,.2);
  position:relative; overflow:hidden; }
.lg-cta::before{ content:""; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(circle at 88% 16%, #FBF3E0, transparent 62%); }
.lg-cta__in{ position:relative; z-index:2; display:grid; grid-template-columns:1fr auto;
  gap:clamp(22px,4vw,46px); align-items:center; padding-block:clamp(36px,4.2vw,56px); }
.lg-cta h2{ font-size:clamp(22px,2.7vw,34px); font-weight:700; color:var(--navy); line-height:1.18; text-wrap:balance; }
.lg-cta p{ margin-top:12px; font-size:15px; color:var(--ink-2); line-height:1.62; max-width:58ch; }
.lg-cta__btns{ display:flex; flex-wrap:wrap; gap:12px; }
.lg-cta__btns .btn--ghost{ background:var(--white); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .lg-body{ grid-template-columns:1fr; gap:26px; }
  .lg-toc{ position:static; max-height:none; }
  .lg-toc ol{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 18px; }
  .lg-cond{ grid-template-columns:1fr; }
  .lg-info, .lg-info--3{ grid-template-columns:1fr; }
  .lg-cta__in{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .lg-toc ol{ grid-template-columns:1fr; }
  /* bảng → card, đọc được ở 360px không scroll ngang */
  .lg-tbl, .lg-tbl tbody, .lg-tbl tr, .lg-tbl td, .lg-tbl th{ display:block; width:auto; }
  /* Lỗi thật gặp trên mobile: <caption> mặc định display:table-caption. Khi
     <table> cha bị ép display:block (dòng trên) mà caption KHÔNG được ép theo,
     trình duyệt tự dựng "anonymous table" chỉ chứa mỗi caption (table fixup) →
     caption co lại theo bề rộng nội dung tối thiểu, chữ rớt xuống dòng theo
     từng từ một, tạo cột dọc hẹp sát mép trái — xem ảnh Quyết chụp báo lỗi
     2026-09-15. Phải ép rõ display:block cho caption, không dựa vào caption
     bị kéo theo table. */
  .lg-tbl caption{ display:block; }
  .lg-tbl thead{ display:none; }
  .lg-tbl tbody tr{ padding:4px 0 10px; }
  .lg-tbl tbody tr + tr{ border-top:1px solid var(--taupe-15); }
  .lg-tbl tbody th{ width:auto; background:var(--cream); border-top:0;
    font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
  .lg-tbl td{ border-top:0; padding:10px 18px 0; }
  .lg-tbl td::before{ content:attr(data-th); display:block; margin-bottom:4px; font-size:11.5px;
    font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
  .lg-clist li{ padding:12px 17px; gap:11px; }
  .lg-col__h{ padding:16px 17px; }
  .lg-step{ gap:14px; }
  /* Lỗi thật gặp trên mobile (vc-body.php, thẻ "Miễn phí tại Hà Nội/Hồ Chí
     Minh"): .lg-info nằm LỒNG trong .lg-step__c, tức cột 2 của grid
     .lg-step (cột 1 = khối tròn số bước 44px + gap 14px = 58px). Card thừa
     hưởng bề rộng cột 2 nên bị đẩy lệch phải — lề trái 78px trong khi mọi
     khối full-width khác trên trang (heading Phần III, đoạn văn ngoài step)
     chỉ lề 20px — lề phải vẫn khớp 20px nên nhìn "lệch" hẳn sang phải, card
     hẹp hơn hẳn phần còn lại của trang. Xem ảnh Quyết chụp báo lỗi
     2026-09-15. Kéo card tràn ngược lại đúng bằng bề rộng cột 1 (44+14=58px)
     để lề trái/phải cân nhau, khớp full-width như phần còn lại của trang. */
  .lg-step .lg-info{ margin-left:-58px; width:calc(100% + 58px); }
  .lg-cta__btns{ width:100%; }
  .lg-cta__btns .btn{ flex:1; min-width:150px; }
}