/* ============================================================
   Vỏ Trung tâm pháp lý LandAIA — theo sổ mẫu 08/10/2026 (bản sáng)
   Nguồn thiết kế: ~/Desktop/giao-dien-legal-mau/so-mau-phap-ly-landaia.html
   Gắn trên <body class="mk"> của legal/layout.blade.php. 0 JS.
   Bản 09/10/2026 (tên tệp mới vì CF giữ tệp tĩnh 4 giờ; bản 20261008 giữ nguyên cho trang còn trong bộ đệm):
   đưa nếp gỡ màu liên kết vào @layer base + cho ô chờ logo BCT ở chân trang co lại.
   ============================================================ */
.mk{--mk-xanh:#2563eb; --mk-xanh-dam:#1d4ed8; --mk-xanh-nhat:#eff6ff; --mk-muc:#0f172a; --mk-nhat:#5b6b84;
    --mk-vien:#e5eaf3; --mk-nen:#f8fafd; --mk-cam:#f59e0b;
    background:#fff; color:var(--mk-muc); font-family:'Instrument Sans',ui-sans-serif,system-ui,sans-serif}
/* Nếp gỡ màu liên kết PHẢI ở @layer base: tailwind v4 xếp lớp tiện ích vào @layer utilities, mà quy tắc ngoài layer
   thắng mọi layer bất kể độ ưu tiên ⇒ để ngoài layer thì nó nuốt text-blue-600/underline của 82 liên kết trong nội dung
   (hiện như chữ thường) và color:#fff của .nut-xanh (đo Chrome 09/10). Trong base, lớp tiện ích và lớp riêng thắng nó. */
@layer base{.mk a{text-decoration:none; color:inherit}}
.mk .wrap{max-width:1200px; margin:0 auto; padding-inline:28px}
/* ---- header site ---- */
.mk-header{position:relative; z-index:5; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--mk-vien)}
.mk-header .wrap{display:flex; align-items:center; gap:26px; height:64px}
.mk-logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.08rem; letter-spacing:-.01em}
.mk-logo img{width:34px; height:34px; display:block}
.mk-logo .tag{font:600 .66rem/1 ui-monospace,Menlo,monospace; letter-spacing:.08em; color:var(--mk-xanh); background:var(--mk-xanh-nhat); border:1px solid #dbeafe; padding:4px 7px; border-radius:6px; text-transform:uppercase}
.mk-nav{display:flex; gap:22px; margin-left:auto; font-weight:500; font-size:.92rem; color:#44506b}
.mk-nav .on{color:var(--mk-xanh); font-weight:600}
.mk-header .nut{display:flex; gap:10px; align-items:center}
.mk-header .nut{margin-left:auto}
.mk-header .mk-nav + .nut{margin-left:0}
.nut-ghost{border:1px solid var(--mk-vien); border-radius:9px; padding:8px 13px; font:600 .84rem/1 'Instrument Sans',sans-serif; color:#44506b; background:#fff}
.nut-xanh{background:var(--mk-xanh); color:#fff; border:1px solid var(--mk-xanh); border-radius:9px; padding:8px 15px; font:600 .84rem/1 'Instrument Sans',sans-serif}
/* ---- hero band sáng ---- */
.mk-hero{position:relative; background:linear-gradient(180deg,#eef4ff,#f8fafd); border-bottom:1px solid var(--mk-vien); color:var(--mk-muc); overflow:hidden}
.mk-hero .wrap{position:relative; z-index:2; padding-block:30px 32px}
.mk-crumb{display:flex; flex-wrap:wrap; gap:7px; align-items:center; font-size:.8rem; color:#7b8aa5}
.mk-crumb b{color:#2c3a54; font-weight:600}
.mk-ma{margin-top:16px; font:600 .72rem/1 ui-monospace,Menlo,monospace; letter-spacing:.12em; color:var(--mk-xanh-dam); text-transform:uppercase}
.mk-hero h1{margin-top:8px; font-size:1.9rem; line-height:1.22; font-weight:700; letter-spacing:-.015em; max-width:28ch; text-wrap:balance}
.chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:16px}
.chip{display:inline-flex; align-items:center; gap:7px; border:1px solid #dbe4f2; background:#fff; color:#44506b; border-radius:999px; padding:6px 12px; font-size:.78rem; font-weight:500}
.chip i{width:7px; height:7px; border-radius:50%; background:var(--mk-cam); display:inline-block}
.chip.mono{font-family:ui-monospace,Menlo,monospace; font-size:.74rem}
.chip svg{width:12px; height:12px}
/* ---- body 3 cột ---- */
.mk-body{background:var(--mk-nen)}
.mk-body > .wrap{display:grid; grid-template-columns:252px minmax(0,1fr) 216px; gap:34px; padding-block:34px 44px; align-items:start}
.sb{position:sticky; top:16px; display:flex; flex-direction:column; gap:18px}
.sb-nhom small{display:block; font:600 .68rem/1 'Instrument Sans',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#8795ad; margin-bottom:8px}
.sb-nhom a{display:flex; align-items:center; gap:9px; padding:7.5px 10px; margin-left:-10px; border-radius:8px; font-size:.88rem; color:#44506b}
.sb-nhom a svg{width:15px; height:15px; stroke:#9aa8c0; flex:none}
.sb-nhom a:hover{background:#eef3fb}
.sb-nhom a.on{background:var(--mk-xanh-nhat); color:var(--mk-xanh-dam); font-weight:600; box-shadow:inset 3px 0 0 var(--mk-xanh)}
.sb-nhom a.on svg{stroke:var(--mk-xanh)}
/* ---- nội dung (bọc @yield('content') của 11 trang — tôn trọng tailwind sẵn có) ---- */
.nd{min-width:0; max-width:70ch}
.nd .dan{font-size:1.02rem; color:#39465f; border-left:3px solid var(--mk-xanh); padding-left:16px; margin-bottom:30px}
.nd h2{display:flex; align-items:baseline; gap:12px; letter-spacing:-.01em}
.nd h2 .so{font:700 .82rem/1 ui-monospace,Menlo,monospace; color:var(--mk-xanh); letter-spacing:.05em}
.nd h2::after{content:""; flex:1 0 24px; height:1px; background:linear-gradient(90deg,#dbe4f2,transparent)}
.nd ul.check{list-style:none; padding:0; display:flex; flex-direction:column; gap:9px; margin-bottom:14px}
.nd ul.check li{display:flex; gap:10px; color:#39465f}
.nd ul.check svg{width:17px; height:17px; stroke:var(--mk-xanh); flex:none; margin-top:3px}
.bang{border:1px solid var(--mk-vien); border-radius:12px; overflow:hidden; background:#fff; margin-block:14px 8px}
.bang table{width:100%; border-collapse:collapse; font-size:.88rem}
.bang th{background:#f1f5fb; text-align:left; font-weight:600; color:#2c3a54; padding:10px 14px; border-bottom:1px solid var(--mk-vien)}
.bang td{padding:11px 14px; border-bottom:1px solid #edf1f8; color:#39465f; vertical-align:top}
.bang tr:last-child td{border-bottom:0}
.bang td b{color:var(--mk-muc); font-weight:600}
.bang .mono{font-family:ui-monospace,Menlo,monospace; font-size:.8rem; color:var(--mk-xanh-dam)}
/* bảng tailwind cũ trong nội dung (10 trang chưa đổi markup) tự khoác kiểu mới */
.nd .overflow-x-auto{border:1px solid var(--mk-vien); border-radius:12px; background:#fff; margin-block:14px 8px}
.nd .overflow-x-auto table{border:0 !important; width:100%; font-size:.88rem}
.nd .overflow-x-auto th{background:#f1f5fb; border:0 !important; border-bottom:1px solid var(--mk-vien) !important; color:#2c3a54; padding:10px 14px}
.nd .overflow-x-auto td{border:0 !important; border-bottom:1px solid #edf1f8 !important; padding:11px 14px; color:#39465f}
.nd .overflow-x-auto tr:last-child td{border-bottom:0 !important}
.goiy{display:flex; gap:12px; border:1px solid #fde9c8; background:#fffaf0; border-radius:12px; padding:14px 16px; margin-block:16px}
.goiy svg{width:18px; height:18px; stroke:var(--mk-cam); flex:none; margin-top:2px}
.goiy div{font-size:.88rem; color:#53462c}
.goiy b{color:#3d3315}
/* timeline các bước */
.buoc{list-style:none; padding:0; margin-block:16px 6px; display:flex; flex-direction:column}
.buoc li{position:relative; padding:0 0 22px 46px}
.buoc li::before{content:""; position:absolute; left:15px; top:30px; bottom:2px; width:2px; background:#dbe4f2}
.buoc li:last-child::before{display:none}
.buoc .num{position:absolute; left:0; top:0; width:32px; height:32px; border-radius:10px; background:var(--mk-xanh-nhat); border:1px solid #d6e4ff; color:var(--mk-xanh-dam); font:700 .85rem/30px ui-monospace,Menlo,monospace; text-align:center}
.buoc h4{font-size:.95rem; font-weight:650; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.buoc h4 .han{font:600 .7rem/1 ui-monospace,Menlo,monospace; color:var(--mk-xanh-dam); background:var(--mk-xanh-nhat); border:1px solid #d6e4ff; border-radius:6px; padding:4px 7px}
.buoc p{font-size:.88rem; color:#4a5872; margin-top:4px}
/* card pháp nhân */
.phapnhan{border:1px solid var(--mk-vien); border-radius:14px; background:#fff; overflow:hidden; margin-top:26px}
.phapnhan header{display:flex; align-items:center; gap:10px; padding:13px 18px; background:linear-gradient(90deg,#f1f6ff,#fff); border-bottom:1px solid var(--mk-vien); font-weight:700; font-size:.95rem}
.phapnhan header svg{width:17px; height:17px; stroke:var(--mk-xanh)}
.phapnhan .ruot{padding:0}
.pn-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#edf1f8; border-radius:0 0 13px 13px; overflow:hidden}
.pn-grid > div{background:#fff; padding:12px 18px}
.pn-grid small{display:block; font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:#8795ad; font-weight:600; margin-bottom:3px}
.pn-grid span{font-size:.88rem; color:#2c3a54; font-weight:500}
.pn-grid .mono{font-family:ui-monospace,Menlo,monospace}
/* pager */
.pager{display:flex; gap:14px; margin-top:28px}
.pager a{flex:1; border:1px solid var(--mk-vien); background:#fff; border-radius:12px; padding:13px 16px; font-size:.85rem}
.pager small{display:block; color:#8795ad; font-size:.72rem; margin-bottom:3px}
.pager b{color:var(--mk-xanh-dam); font-weight:600}
.pager .sau{text-align:right}
/* ---- TOC phải ---- */
.toc{position:sticky; top:16px; display:flex; flex-direction:column; gap:16px}
.toc-box{border:1px solid var(--mk-vien); border-radius:12px; background:#fff; padding:15px 16px}
.toc-box small{display:block; font:600 .68rem/1 'Instrument Sans',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#8795ad; margin-bottom:10px}
.toc-box ol{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px; font-size:.82rem}
.toc-box ol a{display:block; padding:5px 9px; border-left:2px solid #e5eaf3; color:#55637d}
.toc-box ol a:hover{border-color:var(--mk-xanh); color:var(--mk-xanh-dam); background:linear-gradient(90deg,#eff6ff,transparent)}
.toc-lh{font-size:.84rem; color:#39465f; display:flex; flex-direction:column; gap:9px}
.toc-lh b{font-size:.88rem}
.toc-lh .dong{display:flex; gap:8px; align-items:center; color:#44506b}
.toc-lh svg{width:14px; height:14px; stroke:var(--mk-xanh); flex:none}
.toc-lh .mono{font-family:ui-monospace,Menlo,monospace; font-size:.8rem}
/* ---- footer sáng ---- */
.mk-footer{background:#f3f6fb; border-top:1px solid var(--mk-vien); color:#55637d}
.mk-footer .wrap{padding-block:38px 26px}
.ft-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px}
.ft-brand p{font-size:.85rem; margin-top:10px; max-width:34ch}
.ft-brand .mk-logo{color:var(--mk-muc)}
.ft-col small{display:block; font:600 .68rem/1 'Instrument Sans',sans-serif; letter-spacing:.13em; text-transform:uppercase; color:#8795ad; margin-bottom:12px}
.ft-col a{display:block; font-size:.84rem; padding-block:4px; color:#55637d}
.ft-col a:hover{color:var(--mk-xanh-dam)}
.ft-duoi{margin-top:30px; padding-top:18px; border-top:1px solid #e0e7f2; display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between}
.ft-duoi p{font-size:.76rem; color:#8795ad; max-width:72ch}
.ft-duoi p span{color:#6b7a95; font-weight:600}
/* ô chờ logo BCT được CO (không flex:none): chữ dài một dòng từng đẩy trang tràn ngang 78px (VI) / 315px (EN) ở 390px */
.ft-bct{flex:0 1 auto; display:flex; align-items:center; gap:9px; border:1px dashed #c3d0e4; border-radius:10px; padding:9px 13px; font-size:.74rem; color:#7b8aa5}
.ft-bct i{width:26px; height:26px; border-radius:6px; background:var(--mk-xanh-nhat); border:1px solid #d6e4ff; display:grid; place-items:center; font:700 .6rem/1 ui-monospace,monospace; color:var(--mk-xanh-dam); font-style:normal}
/* ---- HUB ---- */
.hub-hero .wrap{padding-block:40px 42px}
.hub-hero h1{max-width:none}
.hub-hero .tim{margin-top:20px; display:flex; max-width:520px; border:1px solid #d3deef; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 10px 24px -18px rgba(37,99,235,.25)}
.hub-hero .tim input{flex:1; background:transparent; border:0; outline:0; color:var(--mk-muc); padding:12px 16px; font:500 .9rem 'Instrument Sans',sans-serif; min-width:0}
.hub-hero .tim input::placeholder{color:#9aa8c0}
.hub-hero .tim button{border:0; background:var(--mk-xanh); color:#fff; font:600 .85rem 'Instrument Sans',sans-serif; padding-inline:18px; cursor:pointer}
.hub-body{background:var(--mk-nen)}
.hub-body .wrap{padding-block:36px 46px; display:flex; flex-direction:column; gap:30px}
.hub-nhom h3{display:flex; align-items:center; gap:10px; font-size:1.02rem; font-weight:700; margin-bottom:14px}
.hub-nhom h3 i{width:8px; height:22px; border-radius:4px; background:var(--mk-xanh); display:inline-block}
.hub-nhom h3 span{color:#8795ad; font-weight:500; font-size:.85rem}
.hub-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.hub-card{position:relative; border:1px solid var(--mk-vien); background:#fff; border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:9px; transition:.15s}
.hub-card:hover{border-color:#bfd3f7; box-shadow:0 14px 30px -18px rgba(37,99,235,.35); transform:translateY(-1px)}
.hub-card svg{width:21px; height:21px; stroke:var(--mk-xanh)}
.hub-card b{font-size:.95rem; letter-spacing:-.01em}
.hub-card p{font-size:.82rem; color:#5b6b84; flex:1}
.hub-card .meta{display:flex; justify-content:space-between; align-items:center; font:500 .72rem/1 ui-monospace,Menlo,monospace; color:#8795ad}
.hub-card .meta em{font-style:normal; color:var(--mk-xanh-dam)}
.hub-rong{font-size:.9rem; color:#55637d; border:1px dashed #c3d0e4; border-radius:12px; padding:16px 18px; background:#fff}
/* ---- danh mục mobile (details, 0 JS) ---- */
.dm-mobile{display:none; border-bottom:1px solid var(--mk-vien); background:#fff}
.dm-mobile summary{list-style:none; display:flex; align-items:center; gap:8px; padding:11px 16px; font:600 .84rem 'Instrument Sans',sans-serif; color:var(--mk-xanh-dam); cursor:pointer}
.dm-mobile summary::-webkit-details-marker{display:none}
.dm-mobile summary svg{width:15px; height:15px; stroke:var(--mk-xanh)}
.dm-mobile > div{padding:4px 16px 12px; display:flex; flex-direction:column}
.dm-mobile > div a{padding:7px 0 7px 23px; font-size:.86rem; color:#44506b; border-left:2px solid #e5eaf3; margin-left:7px}
.dm-mobile > div a.on{color:var(--mk-xanh-dam); font-weight:600; border-color:var(--mk-xanh)}
/* ---- responsive ---- */
@media (max-width:1050px){
  .mk-body > .wrap{grid-template-columns:1fr}
  .sb{display:none}
  .toc{display:none}
  .dm-mobile{display:block}
  .hub-grid{grid-template-columns:repeat(2,1fr)}
  .ft-grid{grid-template-columns:1fr 1fr}
  .mk-nav{display:none}
}
@media (max-width:640px){
  .mk .wrap{padding-inline:16px}
  .mk-header .wrap{height:54px; gap:12px}
  .mk-logo{font-size:1rem}
  .mk-logo img{width:28px; height:28px}
  .mk-hero .wrap{padding-block:22px 24px}
  .mk-hero h1{font-size:1.3rem}
  .mk-body > .wrap{padding-block:22px 30px}
  .hub-grid{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr; gap:18px}
  .mk-footer .wrap{padding-block:24px 20px}
  .pn-grid{grid-template-columns:1fr}
  .pn-grid > div{grid-column:auto !important}
  /* bảng trong nội dung → thẻ xếp chồng, không cuộn ngang */
  .nd table, .nd tbody, .nd tr, .nd td, .nd th{display:block; width:100%}
  .nd thead{display:none}
  .nd table{border:0 !important}
  .nd tr{border:1px solid var(--mk-vien) !important; border-radius:12px; background:#fff; margin-bottom:10px; padding:10px 13px}
  .nd td, .nd th{border:0 !important; padding:3px 0 !important}
  .nd tr td:first-child{font-weight:600; color:var(--mk-muc)}
  .nd .overflow-x-auto{overflow:visible}
}