/* ViralCrawl — Điều khoản & Chính sách.
   Token lấy từ assets/landing.css của crawlviral.com để trang pháp lý nằm cùng
   một thế giới thị giác với landing. 18/09/2026: landing sang NỀN TRẮNG (theo hệ
   thiết kế web LohaVideoAI) nên trang này đổi theo — chỉ đổi GIÁ TRỊ token + vài
   màu cứng, bố cục giữ nguyên. Tiêu đề dùng Bricolage Grotesque như landing (thay Lora). */
:root{
  --bg:#ffffff; --sec:#f5f4fb; --card:#ffffff; --card2:#f1effa;
  --line:#e3e0f0; --line2:#c5c0dc;
  --pri:#4b2fd3; --pri2:#5b3ee6; --grad:linear-gradient(135deg,#6b4cff,#7f63ff);
  --txt:#12101f; --sub:#433f58; --sub2:#5b5772;
  --ok:#0f8a4b; --warn:#a8630a; --danger:#b23f1c;
  --cite:#3b4fc0;
  --rad:16px;
  --serif:"Bricolage Grotesque","Be Vietnam Pro","Segoe UI",system-ui,sans-serif;
  --sans:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{background:var(--bg);color:var(--sub);font-family:var(--sans);font-size:15.5px;line-height:1.72;
  letter-spacing:.1px;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,h4{color:var(--txt);letter-spacing:-.015em;line-height:1.2;text-wrap:balance}
strong,b{color:var(--txt);font-weight:600}
:focus-visible{outline:2px solid var(--pri);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);gap:56px;align-items:start;padding:44px 0 90px}
/* minmax(0,1fr) chứ không 1fr: 1fr = minmax(auto,1fr) nên cột không co dưới min-content của mục lục ⇒ trang tràn ngang 292px ở 390px (đo 18/09/2026, lỗi có từ trước) */
@media(max-width:1000px){.shell{grid-template-columns:minmax(0,1fr);gap:30px;padding-top:26px}}

/* masthead */
.mast{border-bottom:1px solid var(--line);
  background:radial-gradient(120% 180% at 8% 0%,rgba(107,76,255,.10),transparent 58%),var(--sec)}
.mast .wrap{padding-top:30px;padding-bottom:32px}
.brandrow{display:flex;align-items:center;gap:11px;font-weight:700;font-size:17px;color:var(--txt)}
/* Hàng thương hiệu: logo + link về trang chủ ở hai đầu */
.brandrow{justify-content:space-between}
.blink{display:flex;align-items:center;gap:11px;color:var(--txt);text-decoration:none}
.blink img{width:31px;height:31px;border-radius:9px;display:block}
.bback{font-size:13.5px;font-weight:500;color:var(--sub);text-decoration:none;transition:color .2s;
  white-space:nowrap}
.bback:hover{color:var(--txt)}
.doctype{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cite);margin:28px 0 11px}
.mast h1{font-family:var(--serif);font-size:clamp(30px,4.6vw,46px);font-weight:800;letter-spacing:-.02em;max-width:24ch;font-variation-settings:"opsz" 96}
.mast .lede{margin-top:15px;max-width:64ch;font-size:16px}
.metarow{display:flex;flex-wrap:wrap;gap:20px 44px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.metarow>div{min-width:140px}
.metarow dt{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--sub2)}
.metarow dd{margin-top:5px;font-family:var(--mono);font-size:13.5px;color:var(--txt);font-variant-numeric:tabular-nums}

/* TOC */
.toc{position:sticky;top:24px;font-size:13.5px}
@media(max-width:1000px){.toc{position:static;border:1px solid var(--line);border-radius:var(--rad);
  padding:18px 20px;background:var(--card2)}}
.toc h2{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--sub2);margin-bottom:12px}
.toc ol{list-style:none;display:flex;flex-direction:column;gap:1px}
.toc a{display:flex;gap:10px;padding:6px 10px;border-radius:8px;color:var(--sub);line-height:1.45;
  text-decoration:none;transition:background .18s,color .18s}
.toc a:hover{background:var(--card2);color:var(--txt)}
/* nhãn "PL-A" 4 ký tự không lọt 24px -> nới rộng và cấm xuống dòng */
.toc .n{font-family:var(--mono);font-size:11px;color:var(--sub2);padding-top:3px;flex:0 0 32px;
  white-space:nowrap;letter-spacing:-.02em}
.toc .sep{height:1px;background:var(--line);margin:11px 10px}

/* document */
.doc{max-width:70ch}
.doc>section+section{margin-top:50px}
/* block + inline-block, KHÔNG flex: text tiêu đề là text node trần, làm flex item ẩn thì
   không co giãn được và tiêu đề dài sẽ tràn thay vì xuống dòng. */
h2.art{font-family:var(--serif);font-size:25px;font-weight:800;letter-spacing:-.02em;padding-bottom:13px;
  border-bottom:1px solid var(--line2);line-height:1.32}
h2.art .no{display:inline-block;font-family:var(--mono);font-size:12.5px;font-weight:600;
  color:var(--pri);letter-spacing:.06em;margin-right:11px;white-space:nowrap;
  transform:translateY(-2px)}
.doc h3{font-size:15.5px;font-weight:600;margin-top:26px}
.doc p{margin-top:13px}

ol.kh{list-style:none;counter-reset:kh;margin-top:18px;display:flex;flex-direction:column;gap:15px}
/* KHÔNG dùng display:grid trên <li>. Grid biến MỖI <strong>, <a> và mỗi đoạn text rời thành một
   grid item riêng; chúng rớt xuống các hàng ngầm và một nửa số chữ bị ép vào cột số rộng 32px
   -> vỡ thành một từ mỗi dòng. Giữ <li> là block bình thường, số khoản đặt absolute. */
ol.kh>li{counter-increment:kh;position:relative;padding-left:34px}
ol.kh>li::before{content:counter(kh) ".";position:absolute;left:0;top:0;width:28px;
  font-family:var(--mono);font-size:13px;font-weight:600;color:var(--pri);
  font-variant-numeric:tabular-nums}
ol.kh ul{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:8px}
ol.kh ul>li{position:relative;padding-left:19px}
ol.kh ul>li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:2px;
  background:var(--sub2)}

/* Tên luật viết ĐẦY ĐỦ nên chuỗi dài hẳn -> bỏ mono + bỏ white-space:nowrap. Mono 11.5px với
   "Luật Bảo vệ quyền lợi người tiêu dùng, Điều 38 khoản 3" sẽ tràn cột 70ch và đẩy vỡ dòng. */
.cite{font-size:13px;font-weight:600;color:var(--cite);
  text-decoration:none;border-bottom:1px dotted rgba(59,79,192,.5);padding:0 1px}
.cite:hover{color:var(--pri);border-bottom-color:var(--pri);background:var(--card2)}

blockquote{margin:18px 0;padding:2px 0 2px 20px;border-left:2px solid var(--cite);font-family:var(--sans);
  font-style:normal;font-size:15px;color:var(--sub);line-height:1.68}
blockquote .src{display:block;margin-top:9px;font-family:var(--mono);font-style:normal;font-size:11.5px;
  color:var(--sub2)}

.note{margin:22px 0;padding:15px 18px 16px;border-left:3px solid var(--sub2);background:var(--card2);
  border-radius:0 12px 12px 0}
.note h4{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;margin-bottom:8px}
.note p{margin-top:9px}
.note p:first-of-type{margin-top:0}
.note ul{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:7px}
.note ul>li{position:relative;padding-left:18px}
.note ul>li::before{content:"";position:absolute;left:1px;top:.72em;width:6px;height:6px;border-radius:2px;
  background:var(--sub2)}
.note--info{border-left-color:var(--cite)}
.note--info h4{color:var(--cite)}
.note--warn{border-left-color:var(--warn)}
.note--warn h4{color:var(--warn)}
.note--danger{border-left-color:var(--danger)}
.note--danger h4{color:var(--danger)}
.note--ok{border-left-color:var(--ok)}
.note--ok h4{color:var(--ok)}

.tablewrap{margin:22px 0;overflow-x:auto;border:1px solid var(--line);border-radius:var(--rad)}
table{border-collapse:collapse;width:100%;min-width:680px;font-size:13.5px}
th,td{text-align:left;padding:12px 15px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--card2);color:var(--txt);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:target{background:var(--card2)}
/* bảng hoàn tiền: 4 cột prose trong cột văn bản ~690px -> cột mô tả bị bóp còn 8 dòng/ô.
   Chốt tỉ lệ để cột mô tả rộng gấp đôi các cột số. */
table.t-refund{table-layout:fixed;min-width:640px}
/* thead th mặc định nowrap -> "HẠN GỬI YÊU CẦU" không xuống dòng, đẩy cột vượt khung và bị cắt */
table.t-refund thead th{white-space:normal}
/* bảng cấu hình chỉ 2 cột -> không cần min-width 680px của bảng rộng */
table.t-spec{min-width:0;table-layout:fixed}
table.t-spec th:nth-child(1),table.t-spec td:nth-child(1){width:30%}
table.t-spec thead th{white-space:normal}
table.t-refund th:nth-child(1),table.t-refund td:nth-child(1){width:37%}
table.t-refund th:nth-child(2),table.t-refund td:nth-child(2){width:22%}
table.t-refund th:nth-child(3),table.t-refund td:nth-child(3){width:23%}
table.t-refund th:nth-child(4),table.t-refund td:nth-child(4){width:18%}
td .k{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--cite);white-space:nowrap}
td .num{font-family:var(--mono);font-size:12.5px;color:var(--txt);font-variant-numeric:tabular-nums;white-space:nowrap}
td a{color:var(--pri);text-decoration:none;border-bottom:1px solid rgba(75,47,211,.35)}
td a:hover{color:var(--pri2)}

.foot{border-top:1px solid var(--line);background:var(--sec)}
/* grid chứ không flex space-between: 3 khối không chia hết một hàng sẽ rớt xuống
   và để lại khoảng trống chết bên phải. Con đều là <div>, không có text node trần. */
.foot .wrap{padding:34px 28px 46px;display:grid;gap:28px 48px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start}
.foot h4{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--sub2);margin-bottom:10px}
.foot p,.foot li{font-size:13.5px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.foot a{color:inherit;text-decoration:none;transition:color .2s}
.foot a:hover{color:var(--txt)}
.fill{color:var(--warn);font-family:var(--mono);font-size:12.5px}

/* văn bản pháp lý thì người ta in ra — đảo sang mực đen trên giấy trắng */
@media print{
  :root{--bg:#fff;--sec:#fff;--card:#F6F6F8;--card2:#EFEFF3;--txt:#000;--sub:#1a1a1a;--sub2:#555;
    --line:#d4d4dc;--line2:#b8b8c4;--cite:#25368f;--pri:#4a2fb8;--warn:#8a6400;--danger:#a3202e}
  body{font-size:11.5pt}
  .toc,.foot,.bback{display:none}
  .shell{grid-template-columns:1fr;padding:0}
  .doc{max-width:none}
  .mast{background:#fff}
  h2.art{break-after:avoid}
}