/* ===== thanh tien do doc ===== */
.tiendo{position:fixed;top:0;left:0;height:3px;width:0;background:var(--brand);z-index:60;
  transition:width .08s linear;}

/* ===== dau bai, rong het kho ===== */
.bai-hero{padding:clamp(56px,7vw,104px) 0 clamp(48px,6vw,88px);}
/* bo hoa tiet cham, thay bang mot vung sang mo o goc trai duoi cho nen sach */
.bai-hero::before{background-image:none;opacity:1;
  background:radial-gradient(ellipse 54% 96% at 0% 122%,rgba(199,57,55,.17),transparent 58%);
  -webkit-mask-image:none;mask-image:none;}
.bai-hero .lo{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-10);align-items:start;}
.bai-hero .eyebrow{display:inline-flex;align-items:center;gap:var(--s-3);color:var(--on-brand-soft);}
.bai-hero .eyebrow::before{content:"";width:26px;height:2px;background:var(--brand);flex:none;}
.bai-hero h1{max-width:25ch;margin:var(--s-6) 0 0;text-wrap:balance;
  font-size:clamp(1.85rem,4.3vw,3.1rem);line-height:1.07;letter-spacing:-.015em;}
.bai-hero .dek{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.62;color:var(--on-dark-3);
  max-width:50ch;margin:var(--s-8) 0 0;}
.bai-ke{display:flex;flex-wrap:wrap;gap:var(--s-6) var(--s-10);
  border-top:1px solid rgba(255,255,255,.18);padding-top:var(--s-6);margin-top:var(--s-10);}
.bai-ke div{min-width:104px;}
.bai-ke span{display:block;font-family:var(--font-mono);font-size:.75rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--on-dark-5);margin-bottom:5px;}
.bai-ke b{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;color:#fff;}
@media (min-width:1100px){
  .bai-hero .lo{grid-template-columns:minmax(0,1fr) 268px;gap:var(--s-16);}
  .bai-hero .ben{padding-left:var(--s-10);border-left:1px solid rgba(255,255,255,.16);
    margin-top:var(--s-2);}
  .bai-ke{flex-direction:column;gap:0;border-top:0;padding-top:0;margin-top:0;}
  .bai-ke div{min-width:0;}
  .bai-ke div + div{border-top:1px solid rgba(255,255,255,.11);
    margin-top:var(--s-6);padding-top:var(--s-6);}
}

/* ===== than bai, hai cot ===== */
.bai-lo{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-10);}
@media (min-width:1080px){
  .bai-lo{grid-template-columns:232px minmax(0,1fr);gap:var(--s-16);align-items:start;}
}
.bai-ben{position:static;}
@media (min-width:1080px){ .bai-ben{position:sticky;top:92px;} }
.muc{border-left:var(--bw-2) solid var(--line);padding-left:var(--s-5);}
.muc .nhan{display:block;font-family:var(--font-mono);font-size:var(--t-label);
  text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--ink-3);margin-bottom:var(--s-4);}
.muc ol{list-style:none;margin:0;padding:0;counter-reset:m;}
.muc li{counter-increment:m;margin-bottom:var(--s-3);}
.muc a{display:block;font-size:var(--t-small);line-height:1.45;color:var(--ink-2);
  text-decoration:none;padding-left:26px;position:relative;
  transition:color var(--dur) var(--ease);}
.muc a::before{content:counter(m,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--font-mono);font-size:var(--t-label);color:var(--ink-3);}
.muc a:hover{color:var(--brand-text);}
.muc a.dang::before{color:var(--brand);}
.muc a.dang{color:var(--ink);font-weight:600;}

/* ===== chu trong bai ===== */
.bai{max-width:68ch;}
.bai > p:first-of-type{font-size:clamp(1.125rem,1.5vw,1.25rem);line-height:1.7;color:var(--ink);}
.bai h2{margin:var(--s-12) 0 var(--s-6);font-size:clamp(1.35rem,2.4vw,1.75rem);
  line-height:1.25;scroll-margin-top:96px;}
.bai h2 + p{margin-top:0;}
.bai h2::before{content:"";display:block;width:44px;height:4px;background:var(--brand);
  margin-bottom:var(--s-4);}
.bai h2:first-child{margin-top:0;}
.bai p{margin:0 0 var(--s-6);font-size:1.0625rem;line-height:1.8;color:var(--ink-2);}
.bai ul{margin:0 0 var(--s-8);padding-left:0;list-style:none;}
.bai li{font-size:1.0625rem;line-height:1.72;color:var(--ink-2);margin-bottom:var(--s-4);
  padding-left:var(--s-8);position:relative;}
.bai li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:3px;
  background:var(--brand-soft);}

/* cau chot, tran ra ngoai cot chu */
.neu{margin:var(--s-12) 0;padding:var(--s-8) 0;
  border-top:var(--bw-3) solid var(--ink);border-bottom:var(--bw-3) solid var(--ink);}
.neu p{margin:0;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.35;color:var(--ink);}
@media (min-width:1360px){ .neu{margin-right:calc(var(--s-12) * -1);} }

/* ===== cuoi bai ===== */
.bai-chot{background:var(--paper);border:var(--bw-3) solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-xl);padding:var(--s-8);
  margin-top:var(--s-16);max-width:68ch;}
.bai-chot h3{margin-bottom:var(--s-3);}
.bai-khac{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s-5);
  margin-top:var(--s-6);}
.bai-khac a{display:block;background:var(--paper);border:var(--bw-2) solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s-6);
  text-decoration:none;color:var(--ink);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.bai-khac a:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--brand);}
.bai-khac span{display:block;font-family:var(--font-mono);font-size:var(--t-label);
  color:var(--brand-text);letter-spacing:.06em;margin-bottom:8px;}
.bai-khac b{font-family:var(--font-display);font-size:var(--t-h4);line-height:1.35;}