/* =====================================================================
   VIEWD — MỤC KIẾN THỨC
   Chỉ nạp ở trang /kien-thuc và 5 trang bài viết. Nạp SAU main.css.

   Ảnh đại diện là hình mình tự dựng, nền tối, tỉ lệ 1200×630 — nên KHÔNG
   đóng khung như .frame (Sếp đã bác kiểu đóng khung), để ảnh chạy hết bề
   ngang cột và tự cao theo tỉ lệ thật, không cắt xén.
   owner: "Sam (sở hữu độc quyền, cấm sao chép)"
   ===================================================================== */

/* ---------- Ảnh đầu bài ---------- */
.kt-anh{position:relative;line-height:0}
.kt-anh img{
  width:100%;height:auto;display:block;
  aspect-ratio:1200/630;object-fit:cover;
  box-shadow:0 26px 60px -34px rgba(0,0,0,.55);
}
.kt-anh::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(198,147,32,.22);
}

/* ---------- Thân bài ---------- */
.kt-than{font-size:17px;line-height:1.78}
.kt-than > p:first-child{font-size:18.5px}

.kt-than h2{
  font-family:var(--ff-display);
  padding-top:22px;border-top:1px solid var(--line);
  margin:44px 0 14px;
}
.kt-than h2:first-child{border-top:0;padding-top:0;margin-top:0}
.kt-than h3{
  font-family:var(--ff-ui);font-weight:700;font-size:18.5px;
  letter-spacing:-.005em;color:var(--paper);
  margin:30px 0 8px;
}
.kt-than strong{color:var(--paper);font-weight:600}

/* danh sách có số thứ tự — main.css mới chỉ tạo kiểu cho danh sách gạch đầu dòng */
.kt-than ol{
  list-style:none;counter-reset:kt;margin:18px 0;padding:0;
}
.kt-than ol li{
  counter-increment:kt;position:relative;padding-left:38px;
  margin-bottom:12px;color:var(--paper-dim);
}
.kt-than ol li::before{
  content:counter(kt);position:absolute;left:0;top:.1em;
  width:25px;height:25px;display:grid;place-items:center;
  font-family:var(--ff-ui);font-size:12px;font-weight:700;
  color:var(--gold-dk);border:1px solid rgba(198,147,32,.42);
  font-variant-numeric:tabular-nums;
}

/* ---------- Bảng trong bài ---------- */
.bang-bai{
  overflow-x:auto;margin:26px 0;
  border:1px solid var(--line);background:var(--ink-2);
}
.bang-bai table{border-collapse:collapse;width:100%;min-width:520px}
.bang-bai th,.bang-bai td{
  text-align:left;padding:11px 15px;vertical-align:top;
  border-bottom:1px solid var(--line);line-height:1.5;
}
.bang-bai th{
  font-family:var(--ff-ui);font-size:11.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--paper);
  background:var(--ink);border-bottom:1px solid var(--line-2);
  white-space:nowrap;
}
.bang-bai td{
  font-size:14.5px;color:var(--paper-dim);
  font-variant-numeric:tabular-nums;
}
.bang-bai tbody tr:last-child td{border-bottom:0}
.bang-bai td a{color:var(--gold-dk);border-bottom:1px solid rgba(198,147,32,.35)}

/* ---------- Liên kết trong bài ---------- */
.kt-than a{
  color:var(--gold-dk);
  border-bottom:1px solid rgba(198,147,32,.38);
  transition:border-color .3s,color .3s;
}
.kt-than a:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- Dải kêu gọi liên hệ ---------- */
.kt-cta{
  display:grid;grid-template-columns:1.5fr auto;align-items:center;
  gap:clamp(20px,3vw,40px);
  margin-top:clamp(40px,5vw,64px);
  padding:clamp(24px,3.4vw,38px);
  border:1px solid var(--line);background:var(--ink-2);
}
.kt-cta h2{margin:6px 0 0;font-family:var(--ff-display)}
@media(max-width:800px){
  .kt-cta{grid-template-columns:1fr}
  .kt-cta .btn{width:100%;justify-content:center}
}

/* ---------- Lưới trang danh sách ---------- */
.kt-luoi{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2vw,28px);
}
.kt-card--lon{grid-column:span 3;display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch}
.kt-card--lon .thumb{aspect-ratio:auto;height:100%;min-height:260px}
.kt-card--lon .card-body{padding:clamp(26px,3vw,44px);justify-content:center;gap:14px}
.kt-card--lon h3{font-size:clamp(22px,2.6vw,30px);font-family:var(--ff-display);line-height:1.2}
.kt-card--lon p{font-size:15px}

.kt-card .thumb{aspect-ratio:1200/630;background:var(--dark-2)}
.kt-card h3{font-family:var(--ff-ui);font-weight:700;letter-spacing:-.008em}
.kt-card .meta{color:var(--gold-dk)}

@media(max-width:1000px){
  .kt-luoi{grid-template-columns:repeat(2,1fr)}
  .kt-card--lon{grid-column:span 2;grid-template-columns:1fr}
  .kt-card--lon .thumb{aspect-ratio:1200/630;min-height:0}
}
@media(max-width:640px){
  .kt-luoi{grid-template-columns:1fr}
  .kt-card--lon{grid-column:span 1}
  .kt-than{font-size:16px}
  .bang-bai table{min-width:420px}
}