/* =====================================================================
 * TRANG TÀI LIỆU SẢN PHẨM — lớp trình bày dùng chung
 * Tạo 20/09/2026
 * ---------------------------------------------------------------------
 * Cho chín trang: giới thiệu, hướng dẫn cài đặt và hướng dẫn sử dụng
 * của Chép Lệnh, Phát Tin và Copytrade.
 *
 * Nguồn là chín tệp Markdown do chủ dự án viết. KHÔNG bê nguyên xi cấu
 * trúc văn bản lên web: một tài liệu đọc từ trên xuống, còn một trang
 * web thì người ta quét mắt. Nên mỗi loại nội dung được cho một hình
 * dạng riêng — chuỗi bước thành dải có số, danh sách lợi ích thành lưới
 * thẻ, bảng yêu cầu thành hàng chíp, câu hỏi thành khối gập.
 *
 * Mọi màu lấy từ ta-tokens.css. Mỗi trang mang một sắc qua biến `--tl`
 * đặt trên thẻ bọc, giống cách gioithieu.css làm với `--gt`.
 * ===================================================================== */

.tl{ --tl: var(--ta-accent); --tl-dam: var(--ta-accent-ink); }
.tl-st{ --tl:#8A2F62; --tl-dam:#6E244E; }   /* Chép Lệnh */
.tl-sb{ --tl:#A62222; --tl-dam:#851B1B; }   /* Phát Tin */
.tl-ct{ --tl:#5B3A8E; --tl-dam:#472C70; }   /* Copytrade */

.tl{ color: var(--ta-fg-2); }
.tl h2{
  font-size: clamp(22px, 2.6vw, 29px); font-weight: 750;
  color: var(--ta-fg); letter-spacing: -.015em;
  margin: 0 0 6px; text-wrap: balance;
}
.tl h3{
  font-size: 18px; font-weight: 700; color: var(--ta-fg);
  margin: 0 0 8px;
}
.tl p{ line-height: 1.72; margin: 0 0 14px; }
.tl p:last-child{ margin-bottom: 0; }
.tl strong{ color: var(--ta-fg); font-weight: 650; }
/* `!important` o day la de doi lai, khong phai de doi cho tien:
   trangcong.css co `code, kbd, samp, .text-code{ color:#A32A73 !important }`.
   Khong ghi de thi moi doan ma trong tai lieu ra mau hong cua bo giao
   dien cu, lech han bang mau cua trang. Do dac hieu cua ta cao hon nen
   chi can cung mang `!important` la an. */
.tl code{
  font-family: var(--ta-mono); font-size: .88em;
  background: var(--ta-sunken); color: var(--ta-accent-ink) !important;
  padding: 2px 6px; border-radius: 6px;
}

/* Mỗi mục cách nhau một khoảng rộng — trang dài thì khoảng trắng là thứ
   duy nhất nói cho mắt biết chỗ nào hết ý này sang ý khác. */
.tl-muc{ margin-block: clamp(40px, 5.5vw, 68px); }
.tl-muc__dau{ text-align: center; max-width: 720px; margin: 0 auto 26px; }
.tl-muc__dau p{ color: var(--ta-fg-3); font-size: 15.5px; }

/* Nhãn nhỏ trên tiêu đề mục */
.tl-nhan{
  display: inline-block; margin-bottom: 9px;
  font: 700 10.5px/1 var(--ta-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--tl);
  background: var(--ta-surface-2); border: 1px solid var(--ta-line);
  padding: 6px 12px; border-radius: var(--ta-r-pill);
}


/* =====================================================================
 * 1 · DẢI MỞ ĐẦU
 * ===================================================================== */
.tl-hero{
  background: linear-gradient(165deg, #172026 0%, #132A2C 55%, #0F2C2E 100%);
  color: #fff; padding-block: clamp(44px, 6vw, 76px);
  margin-bottom: clamp(28px, 4vw, 46px);
}
.tl-hero__in{ max-width: 880px; margin: 0 auto; padding-inline: 20px; text-align: center; }
.tl-hero h1{
  font-size: clamp(27px, 4vw, 42px); font-weight: 800;
  letter-spacing: -.02em; color: #fff; margin: 12px 0 14px;
  text-wrap: balance;
}
.tl-hero__phu{
  font-size: clamp(15.5px, 1.8vw, 18px); color: rgba(255,255,255,.82);
  line-height: 1.6; margin: 0; text-wrap: balance;
}
.tl-hero__huy{
  display: inline-block;
  font: 700 11.5px/1 var(--ta-mono); letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  padding: 7px 14px; border-radius: var(--ta-r-pill);
}


/* =====================================================================
 * 2 · DÒNG CHẢY — thay cho khối <pre> vẽ mũi tên bằng ký tự
 * ---------------------------------------------------------------------
 * Tài liệu viết "Kênh đăng tín hiệu → phần mềm đọc hiểu → lọc theo luật
 * → lệnh vào MT5" trong một rào mã. Trên web thì bốn chặng ấy đáng được
 * thấy là bốn chặng, có mũi tên thật giữa chúng.
 * ===================================================================== */
.tl-chay{
  display: flex; align-items: stretch; justify-content: center;
  flex-wrap: wrap; gap: 10px;
  margin: 0 0 8px;
}
.tl-chay__o{
  flex: 1 1 165px; max-width: 230px;
  background: var(--ta-surface-2); border: 1px solid var(--ta-line);
  border-radius: var(--ta-r); box-shadow: var(--e1);
  padding: 16px 16px 15px; text-align: center;
}
.tl-chay__so{
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--tl); color: #fff;
  font: 700 12.5px/1 var(--ta-mono); margin-bottom: 9px;
}
.tl-chay__o b{ display: block; color: var(--ta-fg); font-size: 14.5px; margin-bottom: 3px; }
.tl-chay__o span{ font-size: 12.5px; color: var(--ta-fg-3); line-height: 1.5; }
.tl-chay__mui{
  align-self: center; color: var(--tl); font-size: 20px; line-height: 1;
  flex: none; opacity: .55;
}
/* Duoi 992px thi day chuyen xep DOC chu khong de flex tu xuong dong:
   de tu xuong thi bay phan tu (bon o + ba mui ten) rai thanh 3-3-1, mui
   ten mac ke o cuoi hang chi sang khoang khong. */
@media (max-width: 991.98px){
  .tl-chay{ flex-direction: column; align-items: center; gap: 8px; }
  .tl-chay__o{ max-width: 420px; width: 100%; }
  .tl-chay__mui{ transform: rotate(90deg); }
}


/* =====================================================================
 * 3 · LƯỚI THẺ — lợi ích, tính năng
 * ===================================================================== */
.tl-luoi{ display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tl-luoi--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Mot the chiem hai cot: dung cho y quan trong nhat, va tien the - tam
   the trong luoi ba cot de lai mot o trong o hang cuoi, cho mot the an
   hai o thi chin o day khit. Danh sach trong the rong chia doi cot de
   khong keo ca hang cao len. */
.tl-the--rong{ grid-column: span 2; }
.tl-the--rong ul{ columns: 2; column-gap: 26px; }
.tl-the--rong li{ break-inside: avoid; }
.tl-the{
  background: var(--ta-surface-2); border: 1px solid var(--ta-line);
  border-radius: var(--ta-r); box-shadow: var(--e1);
  padding: 20px 21px;
}
.tl-the__ic{
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--ta-accent-soft); color: var(--tl);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 12px;
}
.tl-the h3{ font-size: 16px; margin-bottom: 6px; }
/* Phan phu trong tieu de the - vi du "Sao chep - loc va vong doi": ve
   nho va nhat di de mat bam vao cai TEN tab truoc, roi moi doc phan giai
   thich. */
.tl-the h3 small{ font-weight: 500; font-size: .84em; color: var(--ta-fg-3); }
.tl-the p{ font-size: 14px; margin: 0; }
.tl-the ul{ margin: 8px 0 0; padding-left: 18px; font-size: 14px; }
.tl-the li{ margin-bottom: 5px; line-height: 1.6; }


/* =====================================================================
 * 4 · KHỐI "KHÔNG PHẢI CÁI GÌ"
 * ---------------------------------------------------------------------
 * Phần trung thực nhất của tài liệu nên được thấy, không bị chìm vào
 * một danh sách gạch đầu dòng như mọi mục khác. Nền chìm, viền trái đậm.
 * ===================================================================== */
.tl-khong{
  background: var(--ta-sunken); border: 1px solid var(--ta-line);
  border-left: 3px solid var(--ta-fg-3);
  border-radius: var(--ta-r); padding: 22px 24px;
}
.tl-khong h3{ margin-bottom: 4px; }
.tl-khong > p{ color: var(--ta-fg-3); font-size: 14.5px; }
.tl-khong__ds{ display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 16px; }
.tl-khong__o{
  background: var(--ta-surface-2); border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-sm); padding: 14px 16px; font-size: 14px;
}
.tl-khong__o b{ display: block; color: var(--ta-fg); margin-bottom: 3px; }


/* =====================================================================
 * 5 · DẢI BƯỚC
 * ===================================================================== */
.tl-buoc{ display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0,1fr)); counter-reset: b; }
.tl-buoc--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.tl-buoc--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.tl-buoc__o{
  background: var(--ta-surface-2); border: 1px solid var(--ta-line);
  border-radius: var(--ta-r); box-shadow: var(--e1);
  padding: 18px 20px; position: relative;
}
.tl-buoc__o::before{
  counter-increment: b; content: counter(b);
  display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; border-radius: 50%;
  background: var(--tl); color: #fff;
  font: 700 12px/1 var(--ta-mono); margin-bottom: 10px;
}
.tl-buoc__o h3{ font-size: 15.5px; margin-bottom: 5px; }
.tl-buoc__o p{ font-size: 13.8px; margin: 0; }


/* =====================================================================
 * 6 · HÀNG CHÍP — yêu cầu, điều kiện
 * ===================================================================== */
/* LUOI that, khong phai flex-wrap. Bon chip rong 232px trong `.container`
   960px cong ba khe 10px vua dung 958 - sat qua, Chrome cho xuong dong
   thanh 3+1. Luoi `auto-fit` tinh so cot truoc roi moi chia, nen khong
   co canh sat nut do. */
.tl-chip{ display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.tl-chip__o{
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--ta-surface-2); border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-sm); padding: 13px 15px;
}
.tl-chip__o i{ color: var(--ta-ok); flex: none; margin-top: 2px; }
.tl-chip__o b{ display: block; color: var(--ta-fg); font-size: 14px; }
.tl-chip__o span{ font-size: 12.5px; color: var(--ta-fg-3); line-height: 1.5; }


/* =====================================================================
 * 7 · KHỐI LƯU Ý
 * ===================================================================== */
.tl-luuy{
  background: var(--ta-warn-soft); border: 1px solid #EBD9A8;
  border-radius: var(--ta-r); padding: 16px 19px;
  font-size: 14.5px; line-height: 1.68; color: var(--ta-fg-2);
  margin: 0;
}
.tl-luuy strong{ color: var(--ta-warn); }

/* Khoi canh bao that - sac do, khong phai vang nhac nho. Chi dung cho
   cho nguoi doc co the MAT mot thu gi do: tai khoan bi khoa, tien that.
   Dung nhieu thi nguoi ta thoi doc, nen moi trang nhieu nhat mot khoi. */
.tl-canh{
  background: var(--ta-err-soft); border: 1px solid #F0CFCF;
  border-left: 4px solid var(--ta-err);
  border-radius: var(--ta-r); padding: 17px 20px;
  font-size: 14.5px; line-height: 1.7; color: var(--ta-fg-2);
}
.tl-canh h3{ color: var(--ta-err); font-size: 16px; margin-bottom: 8px; }
.tl-canh strong{ color: var(--ta-err); }
.tl-canh ul{ margin: 10px 0 0; padding-left: 19px; }
.tl-canh li{ margin-bottom: 6px; }
.tl-canh > :last-child{ margin-bottom: 0; }

/* Rao ma - dung cho vi du tin nhan cua kenh tin hieu, tho ra dung
   nguyen van nguoi ta go. Tran ngang rieng trong khoi, khong day ca
   than trang sang. */
.tl-ma{
  background: var(--ta-fg); color: #E8EDF0;
  border-radius: var(--ta-r-sm); padding: 15px 18px;
  overflow-x: auto; margin: 0 0 14px;
  font: 13px/1.66 var(--ta-mono); white-space: pre;
}
.tl-ma code{ background: none; color: inherit !important; padding: 0; font-size: inherit; }

/* Danh sach trong dong chay van ban. Khong dung `list-style` mac dinh
   cua Bootstrap vi no dat dau cham sat le trai qua. */
.tl-ds{ margin: 0 0 14px; padding-left: 20px; }
.tl-ds li{ line-height: 1.72; margin-bottom: 7px; }
.tl-ds li:last-child{ margin-bottom: 0; }

/* Lien ket trong dong chay van ban. Cung chuoi `:not()` nhu thanh dieu
   huong, va vi ly do y het: luat mau lien ket toan cuc trong
   trangcong.css mang `!important` va sau lop do dac hieu, ra mau xanh
   #0A56C6 - lech han bang mau cua trang tai lieu. */
.tl a:not(.btn):not(.nav-link):not(.page-link):not(.text-white):not(.text-light):not(.tc-brand){ color: var(--tl) !important; text-decoration: underline;
  text-underline-offset: 2px; }
.tl a:not(.btn):not(.nav-link):not(.page-link):not(.text-white):not(.text-light):not(.tc-brand):hover{ color: var(--tl-dam) !important; }

/* Be ngang mot khoi ve do rong doc thoai mai (~65 ky tu) va dat giua.
   Dung cho bang, cau hoi, doan van dung mot minh - chu khong cho luoi. */
.tl-hep{ max-width: 820px; margin-inline: auto; }
.tl-hep--rong{ max-width: 960px; }
.tl-meo{
  background: var(--ta-accent-soft); border: 1px solid #C4E3DF;
  border-radius: var(--ta-r); padding: 16px 19px;
  font-size: 14.5px; line-height: 1.68;
}


/* =====================================================================
 * 8 · BẢNG
 * ===================================================================== */
.tl-bang{ overflow-x: auto; border: 1px solid var(--ta-line); border-radius: var(--ta-r); background: var(--ta-surface-2); }
.tl-bang table{ width: 100%; border-collapse: collapse; font-size: 14.2px; margin: 0; }
.tl-bang th{
  text-align: left; padding: 12px 16px; white-space: nowrap;
  background: var(--ta-sunken); color: var(--ta-fg);
  font: 600 11px/1.3 var(--ta-mono); letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--ta-line);
}
.tl-bang td{ padding: 12px 16px; border-bottom: 1px solid var(--ta-line-2); color: var(--ta-fg-2); vertical-align: top; }
.tl-bang tr:last-child td{ border-bottom: 0; }
.tl-bang td b, .tl-bang td strong{ color: var(--ta-fg); }


/* =====================================================================
 * 9 · CÂU HỎI — khối gập
 * ===================================================================== */
.tl-hoi{ max-width: 820px; margin-inline: auto; }
.tl-hoi details{
  background: var(--ta-surface-2); border: 1px solid var(--ta-line);
  border-radius: var(--ta-r); margin-bottom: 10px; overflow: hidden;
}
.tl-hoi summary{
  cursor: pointer; list-style: none; padding: 15px 20px;
  font-size: 15px; font-weight: 650; color: var(--ta-fg);
  display: flex; align-items: center; gap: 12px;
}
.tl-hoi summary::-webkit-details-marker{ display: none; }
.tl-hoi summary::after{
  content: "+"; margin-left: auto; flex: none;
  font: 400 19px/1 var(--ta-font); color: var(--tl);
}
.tl-hoi details[open] summary::after{ content: "\2013"; }
.tl-hoi summary:hover{ background: var(--ta-sunken); }
.tl-hoi__dap{ padding: 0 20px 17px; font-size: 14.5px; line-height: 1.72; }
.tl-hoi__dap p:last-child{ margin-bottom: 0; }


/* =====================================================================
 * 10 · BĂNG ẢNH TỰ TRƯỢT
 * ---------------------------------------------------------------------
 * Cuộn bằng `scroll-snap` của trình duyệt chứ không dịch chuyển bằng
 * JavaScript: vuốt tay trên điện thoại chạy đúng ngay, và khi tắt
 * JavaScript thì băng ảnh vẫn là một dải cuộn được — không thành một
 * đống ảnh chồng nhau.
 *
 * Tự chạy DỪNG khi rê chuột, khi một nút trong băng được chọn bằng bàn
 * phím, và khi người dùng khai `prefers-reduced-motion`.
 * ===================================================================== */
/* Chieu cao la thu phai khong che, khong phai chieu rong: dat tran cao
   `--tc` roi suy nguoc ra rong qua ty le `--tw` PHP gui sang. Lam the
   thi anh van vua khit o, khong co vien den hai ben nhu khi kep bang
   `max-height`. */
.tl-bang-anh{ position: relative; --tc: 580px;
  max-width: calc(var(--tc) * var(--tw, 1.376)); margin-inline: auto; }
@media (max-width: 991.98px){ .tl-bang-anh{ --tc: 460px; } }
.tl-bang-anh__khung{
  display: flex; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--ta-r);
  /* giấu thanh cuộn: dải đã có chấm chỉ vị trí bên dưới */
  scrollbar-width: none; -ms-overflow-style: none;
}
.tl-bang-anh__khung::-webkit-scrollbar{ display: none; }
.tl-bang-anh__o{
  flex: 0 0 100%; scroll-snap-align: center;
  border: 1px solid var(--ta-line); border-radius: var(--ta-r);
  background: var(--ta-surface-2); overflow: hidden;
  box-shadow: var(--e1);
}
/* Ti le khung do PHP tinh tu anh CAO NHAT trong bang roi dat vao bien
   `--ti`. Moi o cao bang nhau nen bang khong giat khi truot, con anh
   thi `contain` - anh chup man hinh ma cat bot la mat thong tin, khac
   voi anh minh hoa. Phan thua hai ben rot xuong nen chim. */
.tl-bang-anh__o img{
  display: block; width: 100%; height: auto;
  aspect-ratio: var(--ti, 1280 / 930);
  object-fit: contain; object-position: center;
  background: var(--ta-sunken);
}
.tl-bang-anh__chu{
  padding: 12px 18px; font-size: 13.5px; color: var(--ta-fg-3);
  border-top: 1px solid var(--ta-line-2); background: var(--ta-surface);
}
.tl-bang-anh__chu b{ color: var(--ta-fg); }

.tl-bang-anh__cham{ display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.tl-bang-anh__cham button{
  position: relative;
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  border: 1px solid var(--ta-line); background: var(--ta-surface-2);
  cursor: pointer; transition: background .18s, transform .18s;
}
.tl-bang-anh__cham button[aria-current="true"]{
  background: var(--tl); border-color: transparent; transform: scale(1.25);
}
/* Vùng bấm thật rộng 30px quanh chấm 9px — chấm nhỏ mà không có vùng
   đệm thì trên điện thoại gần như không bấm trúng. */
.tl-bang-anh__cham button::before{
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 30px; height: 30px; transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce){
  .tl-bang-anh__khung{ scroll-behavior: auto; }
}


/* =====================================================================
 * 11 · KHỐI MỜI CUỐI TRANG
 * ===================================================================== */
.tl-moi{
  background: linear-gradient(150deg, var(--tl), var(--tl-dam));
  color: #fff; border-radius: var(--ta-r-lg);
  padding: clamp(28px, 4vw, 44px); text-align: center;
}
.tl-moi h2{ color: #fff; margin-bottom: 8px; }
.tl-moi p{ color: rgba(255,255,255,.86); max-width: 560px; margin: 0 auto 20px; }
.tl-moi .btn{
  background: #fff !important; color: var(--tl-dam) !important;
  border: 0; font-weight: 650; padding: 11px 24px;
  border-radius: var(--ta-r-sm); margin: 0 5px 8px;
}
.tl-moi .btn--vien{
  background: transparent !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.45);
}

/* Hàng liên kết sang hai tài liệu còn lại của cùng sản phẩm */
.tl-dieuhuong{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* Chuoi `:not()` day du la CO CHU DINH, khong phai thua. trangcong.css
   co mot luat mau lien ket toan cuc `a:not(.btn):not(...)` mang
   `!important` va sau lop do dac hieu; chi them `!important` o day thi
   VAN THUA. Lap lai dung chuoi do roi them to tien `.tl-dieuhuong`
   thanh bay lop - thang chac chan, khong phu thuoc thu tu nap tep.
   Bo chuoi nay di thi chu nut dang chon thanh xanh lien ket tren nen
   man: 1,19:1. Da do tren trang that. */
.tl-dieuhuong a:not(.btn):not(.nav-link):not(.page-link):not(.text-white):not(.text-light):not(.tc-brand){
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ta-surface-2); border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-pill); padding: 9px 18px;
  font-size: 13.5px; font-weight: 600;
  color: var(--ta-fg-2) !important; text-decoration: none;
}
.tl-dieuhuong a:not(.btn):not(.nav-link):not(.page-link):not(.text-white):not(.text-light):not(.tc-brand):hover{ background: var(--ta-sunken); color: var(--ta-fg) !important; }
.tl-dieuhuong a.on:not(.btn):not(.nav-link):not(.page-link):not(.text-white):not(.text-light):not(.tc-brand){ background: var(--tl); border-color: transparent; color: #fff !important; }


/* =====================================================================
 * 11B · DÒNG THỜI GIAN BẢN PHÁT HÀNH
 * ---------------------------------------------------------------------
 * Một đường dọc với các chấm: đọc từ trên xuống là thấy ngay bản nào
 * mới nhất và đã có bao nhiêu bản. Bản đầu tiên được đánh dấu khác
 * hẳn - đó là bản người ta đang cần tải.
 * ===================================================================== */
.tl-ban{ max-width: 880px; margin-inline: auto; position: relative; }
.tl-ban::before{
  content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px;
  width: 2px; background: var(--ta-line); border-radius: 2px;
}
.tl-ban__o{ position: relative; padding-left: 34px; padding-bottom: 26px; }
.tl-ban__o:last-child{ padding-bottom: 0; }
.tl-ban__o::before{
  content: ""; position: absolute; left: 0; top: 7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ta-surface-2); border: 2px solid var(--ta-line);
}
.tl-ban__o--moi::before{ background: var(--tl); border-color: transparent; }
.tl-ban__dau{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.tl-ban__so{
  font: 800 19px/1.2 var(--ta-mono); color: var(--ta-fg);
  letter-spacing: -.01em;
}
.tl-ban__moi{
  font: 700 10.5px/1 var(--ta-mono); letter-spacing: .09em;
  text-transform: uppercase; color: #fff; background: var(--tl);
  padding: 5px 9px; border-radius: var(--ta-r-pill);
}
.tl-ban__ngay{ font-size: 13px; color: var(--ta-fg-3); font-variant-numeric: tabular-nums; }
.tl-ban__than{
  background: var(--ta-surface-2); border: 1px solid var(--ta-line);
  border-radius: var(--ta-r); padding: 17px 20px; margin-top: 10px;
  font-size: 14.5px; line-height: 1.72;
}
.tl-ban__than > :last-child{ margin-bottom: 0; }
.tl-ban__than h3{ font-size: 16.5px; margin: 0 0 8px; }
.tl-ban__than h4, .tl-ban__than h5{
  font-size: 14.5px; font-weight: 700; color: var(--ta-fg);
  margin: 16px 0 6px;
}
.tl-ban__than > h3:first-child, .tl-ban__than > h4:first-child{ margin-top: 0; }
.tl-ban__tep{ display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }
/* Chuoi `:not()` o day la de doi lai CHINH LUAT CUA MINH o tren:
   `.tl a:not(...)` co bay lop, dat mau `var(--tl)` mang `!important`.
   Nut tai ve khong lap lai chuoi do thi chu ra dung mau nen - chu man
   tren nen man, 1,00:1, nut tang hinh. Da do tren trang that.
   Bai hoc: mot luat toan cuc minh THEM VAO cung la mot cai bay nhu luat
   toan cuc nguoi khac de lai. */
.tl-ban__tep a:not(.btn):not(.nav-link):not(.page-link):not(.text-white):not(.text-light):not(.tc-brand){
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--tl); color: #fff !important;
  border-radius: var(--ta-r-sm); padding: 9px 15px;
  font-size: 13.5px; font-weight: 600; text-decoration: none !important;
}
.tl-ban__tep a:not(.btn):not(.nav-link):not(.page-link):not(.text-white):not(.text-light):not(.tc-brand):hover{ background: var(--tl-dam); color: #fff !important; }
.tl-ban__tep a span{ font-weight: 400; opacity: .85; font-variant-numeric: tabular-nums; color: inherit; }


/* =====================================================================
 * 12 · MÀN HÌNH HẸP
 * ===================================================================== */
@media (max-width: 991.98px){
  .tl-luoi{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tl-buoc--4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* Con hai cot thi the rong het tac dung: cho no an ca hang de lai mot
     o trong o hang cuoi. Tra ve mot cot, tam the thanh bon hang khit. */
  .tl-the--rong{ grid-column: auto; }
  .tl-the--rong ul{ columns: 1; }
  /* Hai hang hai chip deu hon ba roi mot. */
  .tl-chip{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 639.98px){
  .tl-chip{ grid-template-columns: minmax(0, 1fr); }
  .tl-luoi, .tl-luoi--2, .tl-buoc, .tl-buoc--4,
  .tl-khong__ds{ grid-template-columns: minmax(0, 1fr); }
  .tl-chay__o{ max-width: none; }
}