/* =====================================================================
 * TRANG PHỤ CỦA NHÓM CÔNG KHAI — lớp trình bày dùng chung
 * Tạo 18/09/2026
 * ---------------------------------------------------------------------
 * Một tệp cho 16 trang, thay cho 16 khối <style> rời nằm trong từng
 * trang (tổng 1.043 dòng). Sáu nhóm:
 *
 *   botvip/goldvip1..7    8 trang chi tiết bot GOLD VIP TREND
 *   faq/*                 2 trang câu hỏi thường gặp
 *   guilde/*              3 trang hướng dẫn cài đặt
 *   update.php, update/*  4 trang nhật ký cập nhật
 *   guild.php             hướng dẫn TradingView→MT5 (trang rời)
 *   jsonmessenger.php     công cụ tạo tin nhắn JSON (trang rời)
 *
 * NỘI DUNG KHÔNG ĐỔI — tệp này bám đúng tên lớp đã có trong markup.
 * Chỉ nạp ở 16 trang đó nên KHÔNG cần lớp bao ngoài để giới hạn.
 *
 * BA THỨ CÁC TRANG NÀY LÀM MÀ MỘT TRANG CON KHÔNG ĐƯỢC LÀM — đã bỏ:
 *   body{...}        update.php, update/*, guild.php, jsonmessenger.php
 *                    đều viết đè nền, phông và padding của cả trang;
 *                    updatedca.php còn đặt padding-top:80px cho một
 *                    thanh menu cố định mà khung dùng chung không có.
 *   .main-menu{...}  bốn trang update sửa thanh điều hướng dùng chung.
 *   .goog-te-*{...}  bốn trang tự đi ẩn khung Google Translate.
 *
 * TÁM TRANG VIP DÙNG TÁM TÊN LỚP CHO CÙNG MỘT THỨ
 * `.vip1-hero`…`.vip7-hero` và `.badge-vip1`…`.badge-vip7`: tám tên,
 * mỗi tên một dải màu riêng (4 xanh lá, 1 cam, 1 tím…) chọn tuỳ hứng
 * chứ không mang nghĩa gì. Gom về một dải chung mang màu VipTrend —
 * đúng màu trang chủ và bảng giá đã dùng cho họ sản phẩm này — bằng
 * danh sách chọn, không phải sửa markup của tám trang.
 * ===================================================================== */


/* =====================================================================
 * 1 · DẢI MỞ ĐẦU
 * ---------------------------------------------------------------------
 * Bản cũ kéo dải ra khỏi lề bằng `margin: -24px -12px 40px -12px`, chỉ
 * đúng khi .container có padding đúng 12px. Ở đây dải nằm NGOÀI
 * .container nên tự tràn hết bề ngang, còn ruột thụt vào đúng bằng mép
 * .container qua padding-inline.
 * ===================================================================== */
.vip1-hero, .vip2-hero, .vip3-hero, .vip4-hero,
.vip5-hero, .vip6a-hero, .vip6b-hero, .vip7-hero,
.setup-hero{
  --ph: #8A5D03;                       /* mặc định: màu họ VipTrend */
  background:
    radial-gradient(1200px 320px at 50% -40%, rgba(255,255,255,.07), transparent),
    linear-gradient(168deg, #10171C 0%, #1A2228 52%, #242A2C 100%);
  color: #FFFFFF;
  padding-block: clamp(36px, 4.6vw, 58px);
  padding-inline: max(20px, calc(50% - 640px));
  text-align: center;
  position: relative; overflow: hidden;
  margin: 0 0 clamp(26px, 3.6vw, 40px);
}
/* hoạ tiết dấu cộng lặp của bản cũ: bỏ, nó chỉ làm nhiễu chữ */
.vip1-hero::before, .vip2-hero::before, .vip3-hero::before, .vip4-hero::before,
.vip5-hero::before, .vip6a-hero::before, .vip6b-hero::before, .vip7-hero::before,
.setup-hero::before{ content: none; }
/* một vệt sáng mang màu họ sản phẩm, đủ để nhận ra nhóm trang */
.vip1-hero::after, .vip2-hero::after, .vip3-hero::after, .vip4-hero::after,
.vip5-hero::after, .vip6a-hero::after, .vip6b-hero::after, .vip7-hero::after,
.setup-hero::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--ph), transparent);
}
.vip1-hero h1, .vip2-hero h1, .vip3-hero h1, .vip4-hero h1,
.vip5-hero h1, .vip6a-hero h1, .vip6b-hero h1, .vip7-hero h1,
.setup-hero h1{
  font-size: clamp(25px, 3.2vw, 37px);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.16;
  color: #FFFFFF; text-shadow: none;
  margin: 0 auto 10px; max-width: 22ch;
  position: relative; text-wrap: balance;
}
/* Tiêu đề ba trang hướng dẫn dài hơn tên bot: 22ch bẻ "QUANG DCA EA -
   Setup Guide" thành hai dòng ngay giữa tên sản phẩm. */
.setup-hero h1{ max-width: 40ch; }
.vip1-hero p, .vip2-hero p, .vip3-hero p, .vip4-hero p,
.vip5-hero p, .vip6a-hero p, .vip6b-hero p, .vip7-hero p,
.setup-hero p{
  font-size: 15.5px; font-weight: 300; line-height: 1.6;
  color: rgba(255,255,255,.76); opacity: 1;
  max-width: 62ch; margin: 0 auto; position: relative;
}

/* Nhãn số liệu dưới tiêu đề — tám tên lớp, một kiểu */
.badge-vip1, .badge-vip2, .badge-vip3, .badge-vip4,
.badge-vip5, .badge-vip6a, .badge-vip6b, .badge-vip7{
  display: inline-block; position: relative; margin-top: 16px;
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.20);
  color: #FFFFFF !important;
  font-size: 13px !important; font-weight: 500 !important;
  padding: 9px 18px !important; border-radius: var(--ta-r-pill) !important;
  box-shadow: none !important;
}

/* Đường dẫn quay lại, nằm trong dải mở đầu */
.breadcrumb-vip{
  position: relative; background: transparent; padding: 0;
  font-size: 13px; color: rgba(255,255,255,.55);
}
.breadcrumb-vip a{ color: rgba(255,255,255,.78); text-decoration: none; }
.breadcrumb-vip a:hover{ color: #FFFFFF; text-decoration: underline; }
.breadcrumb-vip .active{ color: #FFFFFF; font-weight: 600; }


/* =====================================================================
 * 2 · TIÊU ĐỀ MỤC
 * ===================================================================== */
.section-title{
  font-size: clamp(20px, 2.3vw, 27px) !important;
  font-weight: 700; letter-spacing: -.02em;
  color: var(--ta-fg);
  padding-left: 14px; border-left: 4px solid var(--ta-accent);
  display: inline-block; margin-bottom: 8px;
}
.section-subtitle{
  font-size: 15px; font-weight: 300; line-height: 1.6;
  color: var(--ta-fg-2); margin-bottom: 22px;
}


/* =====================================================================
 * 3 · Ô SỐ LIỆU (tám trang VIP)
 * ---------------------------------------------------------------------
 * Đây là chỗ khách đọc số nên số dùng phông đẳng chiều và tabular-nums:
 * chữ số nào cũng rộng bằng nhau, sáu ô trên một hàng thẳng cột.
 * ===================================================================== */
.stat-card{
  background: var(--ta-surface) !important;
  border: 1px solid var(--ta-line) !important;
  border-radius: var(--ta-r-lg);
  box-shadow: var(--e1);
  padding: 18px 14px; text-align: center; height: 100%;
  transition: box-shadow var(--ta-fast), transform var(--ta-fast);
}
.stat-card:hover{ box-shadow: var(--e2); transform: translateY(-2px); }
.stat-value{
  font-family: var(--ta-mono); font-variant-numeric: tabular-nums;
  font-size: 25px !important; font-weight: 700; line-height: 1.15;
  letter-spacing: -.035em; margin-bottom: 4px;
  color: var(--ta-fg) !important;
}
/* Bootstrap gắn .text-success/.text-danger lên số: giữ nghĩa lãi/lỗ */
.stat-value.text-success{ color: var(--ta-ok) !important; }
.stat-value.text-danger { color: var(--ta-err) !important; }
.stat-value.text-warning{ color: var(--ta-warn) !important; }
.stat-value.text-primary{ color: var(--ta-accent-ink) !important; }
.stat-label{
  font-size: 12px; font-weight: 500; color: var(--ta-fg-3) !important;
}
.stat-sub{
  font-size: 11.5px; color: var(--ta-fg-3) !important; margin-top: 3px;
}

/* Nhãn thông số dưới tiêu đề mục — bản cũ cho năm nhãn cạnh nhau năm
   dải màu khác nhau. Một kiểu, đọc được, không tranh nhau. */
.tp-chip{
  display: inline-block;
  background: var(--ta-accent-soft) !important;
  border: 1px solid #C9E4E0;
  color: var(--ta-accent-ink) !important;
  font-size: 12.5px !important; font-weight: 600;
  padding: 7px 14px !important; border-radius: var(--ta-r-pill) !important;
}


/* Nhãn trên nền đậm (trong khối mời mua) */
.tp-chip-sang{
  display: inline-block;
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.26);
  color: #FFFFFF !important;
  font-size: 13.5px !important; font-weight: 600;
  padding: 7px 16px !important; border-radius: var(--ta-r-pill) !important;
}

/* Nút dẫn sang trang VIP khác — bản cũ viết dải màu thẳng vào style= */
.btn.tp-nut{
  background: var(--ta-accent) !important; color: #FFFFFF !important;
  border-color: transparent !important; font-weight: 650;
}
.btn.tp-nut:hover{ background: var(--ta-accent-ink) !important; color: #FFFFFF !important; }

/* Đầu thẻ số liệu. Bản cũ bốn thẻ cạnh nhau bốn dải màu khác hẳn
   (xanh lá / cam / đỏ / xanh dương) — riêng ô “Quản Lý Rủi Ro” màu đỏ
   đọc ra thành cảnh báo, trong khi đó chỉ là một mục số liệu. */
.card{
  background: var(--ta-surface) !important;
  border: 1px solid var(--ta-line) !important;
  border-radius: var(--ta-r-lg) !important;
  box-shadow: var(--e1);
  overflow: hidden;
}
.card-header{
  background: linear-gradient(150deg, var(--ta-accent), var(--ta-accent-ink));
  color: #FFFFFF; border-bottom: 0;
  font-size: 14.5px; font-weight: 650; letter-spacing: -.01em;
  padding: 14px 20px;
}
.card-body{ padding: 18px 20px; }
.highlight-card{
  background: var(--ta-surface) !important;
  border: 1px solid var(--ta-line) !important;
  border-radius: var(--ta-r-lg) !important;
  box-shadow: var(--e1);
  transition: box-shadow var(--ta-base), transform var(--ta-base);
}
.highlight-card:hover{ transform: translateY(-2px); box-shadow: var(--e2); }


/* =====================================================================
 * 4 · BẢNG SỐ LIỆU
 * ===================================================================== */
.detail-table{
  background: var(--ta-surface-2);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  overflow: hidden; margin-bottom: 0;
}
.detail-table th{
  background: var(--ta-surface) !important;
  width: 40%;
  font-family: var(--ta-mono) !important;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ta-fg-3) !important;
  border-bottom: 1px solid var(--ta-line) !important;
  padding: 12px 15px !important; vertical-align: middle;
}
.detail-table td{
  font-family: var(--ta-mono) !important; font-variant-numeric: tabular-nums;
  font-size: 13.5px !important; font-weight: 500 !important;
  color: var(--ta-fg) !important;
  border-bottom: 1px solid var(--ta-line-2) !important;
  padding: 12px 15px !important; vertical-align: middle;
}
.detail-table tr:last-child th,
.detail-table tr:last-child td{ border-bottom: 0 !important; }
.detail-table tbody tr:hover th,
.detail-table tbody tr:hover td{ background: rgba(15,118,110,.04) !important; }


/* =====================================================================
 * 5 · ẢNH BÁO CÁO VÀ Ô PHÓNG TO
 * ===================================================================== */
.img-report{
  border-radius: var(--ta-r-lg);
  border: 1px solid var(--ta-line);
  box-shadow: var(--e1); cursor: zoom-in;
  transition: box-shadow var(--ta-fast), transform var(--ta-fast);
}
.img-report:hover{ transform: none; box-shadow: var(--e2); }
.lightbox-overlay{
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(16,23,28,.90);
  justify-content: center; align-items: center; cursor: zoom-out;
  padding: 24px;
}
.lightbox-overlay.active{ display: flex; }
.lightbox-overlay img{
  max-width: 96%; max-height: 92vh; object-fit: contain;
  border-radius: var(--ta-r); box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.lightbox-close{
  position: absolute; top: 18px; right: 22px; z-index: 10000;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  color: #FFFFFF; font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover{ background: rgba(255,255,255,.26); }


/* =====================================================================
 * 6 · KHỐI MỜI XEM / MỜI MUA (tám trang VIP)
 * ---------------------------------------------------------------------
 * Bản cũ viết thẳng dải màu và đổ bóng vào style=, kèm onmouseover
 * bằng JavaScript để nhấc khối lên. Ở đây là CSS, :hover lo việc đó.
 * ===================================================================== */
.tp-cta{
  display: block; text-decoration: none;
  background: linear-gradient(150deg, var(--ta-accent), var(--ta-accent-ink));
  border-radius: var(--ta-r-lg);
  padding: 28px 24px; text-align: center; color: #FFFFFF;
  box-shadow: var(--e2);
  transition: transform var(--ta-base), box-shadow var(--ta-base);
}
.tp-cta:hover{ transform: translateY(-3px); box-shadow: var(--e3); }
.tp-cta h3{
  font-size: clamp(18px, 2vw, 23px); font-weight: 800;
  letter-spacing: -.02em; color: #FFFFFF; margin: 0 0 8px;
}
.tp-cta p{ font-size: 15px; color: rgba(255,255,255,.82); margin: 0; }
.tp-cta-icon{ font-size: 30px; margin-bottom: 8px; }
.tp-cta-nut{
  display: inline-block; margin-top: 14px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.26);
  padding: 8px 22px; border-radius: var(--ta-r-pill);
  font-size: 14px; font-weight: 650; color: #FFFFFF;
}
/* khối mua ở cuối trang: cùng ngôn ngữ, nền đậm hơn */
.tp-mua{
  background: linear-gradient(150deg, #172026, #1E2C32) !important;
  color: #FFFFFF !important;
  border-radius: var(--ta-r-lg) !important;
  box-shadow: var(--e2);
}
.tp-mua h3{ color: #FFFFFF; }
.tp-mua p{ color: rgba(255,255,255,.78) !important; opacity: 1 !important; }
.tp-mua .btn{
  background: var(--ta-accent) !important; color: #FFFFFF !important;
  border-color: transparent !important;
}
.tp-mua .btn:hover{ background: #12897F !important; }

/* Khuyến mãi combo (goldvip 6a, 6b) */
.combo-promo{
  background: var(--ta-warn-soft);
  border: 1px dashed #D9B36A;
  border-radius: var(--ta-r-lg);
  padding: 20px; text-align: center;
}
.combo-promo h5{ color: var(--ta-warn); font-weight: 700; }


/* =====================================================================
 * 7 · CÂU HỎI THƯỜNG GẶP
 * ---------------------------------------------------------------------
 * Bản cũ đóng mở bằng display:none/block nên không có chuyển động.
 *
 * KHÔNG dùng được mẹo `grid-template-rows: 0fr → 1fr` ở đây. Mẹo đó chỉ
 * đúng khi câu trả lời có ĐÚNG MỘT thẻ con: `0fr` tả một hàng lưới,
 * thẻ con thứ hai trở đi rơi vào hàng ngầm và hàng ngầm mặc định là
 * `auto`. Đo trên trang thật: câu trả lời dài nhất có 13 thẻ con, đóng
 * lại vẫn còn cao 114px. Nên ở đây là max-height, chạy được với số thẻ
 * con bất kỳ. Câu trả lời cao nhất đo được 908px, lấy trần 1400px.
 * ===================================================================== */
.faq-container{
  max-width: 1000px; margin-inline: auto;
  background: transparent; box-shadow: none;
  padding: clamp(26px, 3.4vw, 42px) 20px clamp(30px, 4vw, 50px);
}
.faq-container > h1{
  font-size: clamp(25px, 3.2vw, 35px); font-weight: 800;
  letter-spacing: -.03em; color: var(--ta-fg);
  text-align: center; text-wrap: balance;
  border-bottom: 0; padding-bottom: 0;
  margin: 0 0 clamp(26px, 3.4vw, 38px);
}
.faq-section{ margin: 0 0 clamp(26px, 3.4vw, 40px); }
.faq-section > h2{
  font-size: clamp(18px, 2vw, 22px); font-weight: 700;
  letter-spacing: -.02em; color: var(--ta-fg);
  padding-left: 14px; border-left: 4px solid var(--ta-accent);
  margin-bottom: 14px;
}
.faq-item{
  background: var(--ta-surface);
  border: 1px solid var(--ta-line);
  border-left: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  box-shadow: var(--e1);
  margin: 0 0 10px; overflow: hidden;
}
.faq-question{
  margin: 0; padding: 15px 20px;
  background: transparent;
  font-size: 14.5px; font-weight: 650; line-height: 1.5;
  color: var(--ta-fg); cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  transition: background var(--ta-fast), color var(--ta-fast);
}
.faq-question:hover{ background: var(--ta-sunken); }
/* Dấu cho biết bấm mở được. Markup không có thẻ nào cho việc này, và
   kịch bản chỉ bật/tắt .show trên câu trả lời, nên bám qua :has(). */
.faq-question::after{
  content: "+"; flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ta-accent-soft); color: var(--ta-accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600; line-height: 1;
  transition: background var(--ta-fast), color var(--ta-fast);
}
.faq-question:has(+ .faq-answer.show){
  background: var(--ta-accent-soft); color: var(--ta-accent-ink);
}
.faq-question:has(+ .faq-answer.show)::after{
  content: "−"; background: var(--ta-accent); color: #FFFFFF;
}
.faq-answer{
  display: block; max-height: 0; overflow: hidden;
  transition: max-height .26s ease, padding .26s ease;
  background: transparent; padding: 0 20px;
}
.faq-answer.show{
  max-height: 1400px;
  border-top: 1px solid var(--ta-line-2);
  padding-block: 16px;
}
.faq-answer p, .faq-answer li{
  font-size: 14px; line-height: 1.75; color: var(--ta-fg-2);
}
.faq-answer > :last-child{ margin-bottom: 0; }

.highlight{
  display: block;
  background: var(--ta-warn-soft); color: var(--ta-warn);
  border: 1px solid #EBD9A8; border-left: 3px solid var(--ta-warn);
  border-radius: var(--ta-r-sm);
  padding: 12px 15px; margin: 12px 0;
  font-size: 13.5px; line-height: 1.7;
}
.error-box{
  background: var(--ta-err-soft); color: var(--ta-err);
  border: 1px solid #E8C6C6; border-left: 3px solid var(--ta-err);
  border-radius: var(--ta-r-sm);
  padding: 12px 15px; margin: 12px 0;
  font-size: 13.5px; line-height: 1.7;
}
.success-box{
  background: var(--ta-ok-soft); color: var(--ta-ok);
  border: 1px solid #BFE0D2; border-left: 3px solid var(--ta-ok);
  border-radius: var(--ta-r-sm);
  padding: 12px 15px; margin: 12px 0;
  font-size: 13.5px; line-height: 1.7;
}
.code-block{
  background: var(--ta-fg); color: #E6EDF3;
  border: 0; border-radius: var(--ta-r-sm);
  padding: 14px 17px; margin: 12px 0;
  font-family: var(--ta-mono); font-size: 12.5px; line-height: 1.75;
  overflow-x: auto;
}
.contact-info{
  background: var(--ta-accent-soft);
  border: 1px solid #C9E4E0;
  border-radius: var(--ta-r-lg);
  padding: 22px; text-align: center; margin-top: 28px;
}
.contact-info a{
  color: var(--ta-accent-ink); font-weight: 650; text-decoration: none;
}
.contact-info a:hover{ text-decoration: underline; }


/* =====================================================================
 * 8 · HƯỚNG DẪN CÀI ĐẶT (guilde/*)
 * ===================================================================== */
.step-card{
  background: var(--ta-surface);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  box-shadow: var(--e1);
  overflow: hidden; margin-bottom: 18px;
  transition: box-shadow var(--ta-base);
}
.step-card:hover{ box-shadow: var(--e2); }
.step-header{
  display: flex; align-items: center; gap: 14px;
  background: var(--ta-surface-2);
  border-bottom: 1px solid var(--ta-line-2);
  padding: 16px 20px;
}
.step-number{
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ta-accent); color: #FFFFFF;
  font-family: var(--ta-mono); font-size: 15px; font-weight: 700;
}
.step-title{
  font-size: 15.5px; font-weight: 650; color: var(--ta-fg); margin: 0;
}
.step-body{ padding: 20px; }
.step-body ul{ margin-bottom: 0; }
.step-body li{
  margin-bottom: 9px; font-size: 14px; line-height: 1.7; color: var(--ta-fg-2);
}
.step-body code{
  background: var(--ta-sunken); color: var(--ta-accent-ink);
  padding: 2px 7px; border-radius: 5px;
  font-family: var(--ta-mono); font-size: .88em;
}

/* Hai chế độ cấu hình — thẻ chọn */
.config-tabs{
  display: flex; gap: 8px; margin-bottom: 20px;
  border-radius: 0; overflow: visible; box-shadow: none;
}
.config-tab{
  flex: 1; padding: 14px 18px; text-align: center; cursor: pointer;
  background: var(--ta-surface-2);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r);
  color: var(--ta-fg-2);
  font-size: 15px; font-weight: 600;
  transition: background var(--ta-fast), color var(--ta-fast),
              border-color var(--ta-fast), box-shadow var(--ta-fast);
}
.config-tab:first-child{ border-right: 1px solid var(--ta-line); }
.config-tab:hover:not(.active){ background: var(--ta-sunken); color: var(--ta-fg); }
.config-tab.active,
.config-tab.signal-tab.active,
.config-tab.local-tab.active{
  background: var(--ta-accent); border-color: transparent; color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(15,118,110,.26);
}
.config-tab i{ margin-right: 8px; }
.config-tab small{
  display: block; margin-top: 3px;
  font-size: 12.5px; font-weight: 400; color: var(--ta-fg-3);
}
.config-tab.active small{ color: rgba(255,255,255,.82); opacity: 1; }

.config-content{
  display: none; padding: 20px; border-radius: var(--ta-r); margin-bottom: 15px;
}
.config-content.active{ display: block; }
.config-content.signal,
.config-content.local{
  background: var(--ta-surface-2);
  border: 1px solid var(--ta-line);
}

.param-table{ width: 100%; border-collapse: collapse; }
.param-table th{
  background: var(--ta-surface) !important;
  font-family: var(--ta-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ta-fg-3);
  text-align: left; padding: 12px 15px;
  border-bottom: 1px solid var(--ta-line) !important;
}
.param-table td{
  padding: 12px 15px; vertical-align: top;
  font-size: 13.5px; line-height: 1.65; color: var(--ta-fg-2);
  border-bottom: 1px solid var(--ta-line-2);
}
.param-table tr:hover{ background: rgba(15,118,110,.035); }
.param-name{ font-weight: 650; color: var(--ta-fg); }
.param-example{
  background: var(--ta-accent-soft); color: var(--ta-accent-ink);
  padding: 2px 8px; border-radius: 5px;
  font-family: var(--ta-mono); font-size: .86rem;
}

/* Ba hộp lưu ý. Bản cũ mỗi hộp một dải màu; ở đây dùng bộ màu ngữ
   nghĩa chung của cả web, và luôn kèm chữ chứ không chỉ có màu. */
.tip-box, .warning-box{
  border-radius: var(--ta-r); padding: 18px 20px; margin: 20px 0;
}
.tip-box{
  background: var(--ta-ok-soft); border: 1px solid #BFE0D2;
  border-left: 3px solid var(--ta-ok);
}
.tip-box h5, .tip-box p, .tip-box ul, .tip-box li{
  color: var(--ta-ok); margin-bottom: 0;
}
.tip-box h5{ font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.warning-box{
  background: var(--ta-warn-soft); border: 1px solid #EBD9A8;
  border-left: 3px solid var(--ta-warn);
}
.warning-box h4, .warning-box h5, .warning-box p,
.warning-box ul, .warning-box li{ color: var(--ta-warn); margin-bottom: 0; }
.warning-box h4, .warning-box h5{
  font-size: 15px; font-weight: 700; margin-bottom: 8px;
}
/* .error-box đã tả ở mục 7, đây chỉ thêm phần đầu đề của bản hướng dẫn */
.error-box h5{
  font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--ta-err);
}
.error-box p, .error-box ul, .error-box li{
  color: var(--ta-err); margin-bottom: 0;
}

.video-container{ max-width: 900px; margin-inline: auto; }
.video-container .ratio{
  border-radius: var(--ta-r-lg); overflow: hidden;
  border: 1px solid var(--ta-line); box-shadow: var(--e1);
}

.toc-card{
  background: var(--ta-surface);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  box-shadow: var(--e1);
  padding: 22px 25px;
}
.toc-card ol{ margin-bottom: 0; }
.toc-card li{ margin-bottom: 8px; }
.toc-card a{ color: var(--ta-fg); font-weight: 500; text-decoration: none; }
.toc-card a:hover{ color: var(--ta-accent-ink); text-decoration: underline; }
.toc-2col{ columns: 2; column-gap: 40px; }
.toc-2col li{ break-inside: avoid; -webkit-column-break-inside: avoid; }

/* Hai thẻ so sánh chế độ chạy */
.mode-card{
  background: var(--ta-surface);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  box-shadow: var(--e1);
  overflow: hidden; height: 100%;
  transition: box-shadow var(--ta-base), transform var(--ta-base);
}
.mode-card:hover{
  transform: translateY(-2px); box-shadow: var(--e2);
  border-color: var(--ta-line);
}
.mode-card-header{ padding: 18px 24px; color: #FFFFFF; }
.mode-card-header.local{ background: linear-gradient(150deg, #27479E, #1D3579); }
.mode-card-header.signal{
  background: linear-gradient(150deg, var(--ta-accent), var(--ta-accent-ink));
}
.mode-card-header h3, .mode-card-header h4, .mode-card-header h5{
  color: #FFFFFF; margin: 0;
}
.mode-card-body{ padding: 20px 24px; background: var(--ta-surface); }
.mode-card-body ul{ list-style: none; padding: 0; margin: 0; }
.mode-card-body li{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--ta-line-2);
  font-size: 14px; line-height: 1.6; color: var(--ta-fg-2);
}
.mode-card-body li span{ color: var(--ta-fg-2); }
.mode-card-body li:last-child{ border-bottom: 0; }
.mode-card-body li i{ color: var(--ta-accent); margin-top: 4px; }

/* Bảng điều khiển trên biểu đồ */
.panel-guide{
  background: var(--ta-surface-2);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  box-shadow: var(--e1);
  padding: 32px; margin: 36px 0;
}
.panel-btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: var(--ta-r-sm);
  font-size: 14px; font-weight: 650; margin: 5px; color: #FFFFFF;
}
.panel-btn.green{ background: #1B7A37; }
.panel-btn.red  { background: var(--ta-err); }
.panel-btn.blue { background: #27479E; }
.panel-btn.gray { background: var(--ta-fg-2); }

.accordion-custom .accordion-button{
  background: var(--ta-surface);
  color: var(--ta-fg); font-size: 15px; font-weight: 650;
  padding: 17px 22px; border: 0; box-shadow: none;
}
.accordion-custom .accordion-button:not(.collapsed){
  background: var(--ta-accent-soft); color: var(--ta-accent-ink);
}
.accordion-custom .accordion-body{ padding: 22px; background: var(--ta-surface-2); }

.step-grid .step-card{ height: 100%; margin-bottom: 0; }


/* =====================================================================
 * 9 · NHẬT KÝ CẬP NHẬT (update.php + update/*)
 * ===================================================================== */
.update-content{ line-height: 1.7; }
.update-content h2{
  font-size: clamp(19px, 2.1vw, 24px) !important; font-weight: 700;
  letter-spacing: -.02em; color: var(--ta-fg);
  padding: 0 0 0 14px; border-bottom: 0;
  border-left: 4px solid var(--ta-accent);
  margin: 34px 0 15px;
}
.update-content h3{
  font-size: 16.5px !important; font-weight: 650;
  color: var(--ta-fg); margin: 24px 0 10px;
}
.update-content h4{
  font-size: 15px; font-weight: 650; color: var(--ta-fg-2); margin: 20px 0 8px;
}
.update-content ul, .update-content ol{ margin-left: 20px; }
.update-content li{
  margin-bottom: 8px; font-size: 14.5px; line-height: 1.75; color: var(--ta-fg-2);
}
.update-content code{
  background: var(--ta-sunken); color: var(--ta-accent-ink);
  padding: 2px 7px; border-radius: 5px;
  font-family: var(--ta-mono); font-size: .88em;
}
.update-content pre{
  background: var(--ta-fg); color: #E6EDF3;
  border: 0; border-radius: var(--ta-r-sm);
  padding: 16px 18px; overflow-x: auto;
  font-family: var(--ta-mono); font-size: 12.5px; line-height: 1.7;
}
.update-content pre code{ background: transparent; color: inherit; padding: 0; }
.update-content a{
  color: var(--ta-accent-ink); font-weight: 600; text-decoration: none;
}
.update-content a:hover{ text-decoration: underline; }
.update-content .table{ margin-top: 20px; }

/* Đường thời gian ở update.php */
.timeline{ position: relative; padding: 4px 0; }
.timeline::before{
  content: ""; position: absolute; left: 19px; top: 14px; bottom: 14px;
  width: 2px; background: var(--ta-line); z-index: 1;
}
.timeline-item{ position: relative; margin-bottom: 22px; padding-left: 62px; }
.timeline-marker{
  position: absolute; left: 0; top: 4px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ta-fg-2); color: #FFFFFF;
  border: 3px solid var(--ta-bg);
  font-family: var(--ta-mono); font-size: 12px; font-weight: 700;
  box-shadow: none;
}
/* Bản mới nhất: bản cũ đánh dấu bằng nền xanh viết thẳng vào style= */
.timeline-item.moi-nhat .timeline-marker{ background: var(--ta-accent); }
.timeline-content{
  background: var(--ta-surface);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  box-shadow: var(--e1);
  padding: 0; overflow: hidden;
}
.timeline-content::before{ content: none; }   /* mũi nhọn chỉ vào mốc: bỏ */
.timeline-header{
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0; padding: 15px 20px;
  border-bottom: 1px solid var(--ta-line-2);
}
.timeline-header h3{
  flex: 1; margin: 0;
  font-size: 16px !important; font-weight: 650; color: var(--ta-fg);
}
.date{
  background: var(--ta-sunken); color: var(--ta-fg-3);
  padding: 5px 10px; border-radius: var(--ta-r-pill);
  font-family: var(--ta-mono); font-size: 11.5px; font-weight: 500;
}
.status{
  background: var(--ta-sunken) !important; color: var(--ta-fg-2) !important;
  padding: 5px 10px !important; border-radius: var(--ta-r-pill) !important;
  font-family: var(--ta-mono); font-size: 11px !important;
  font-weight: 600; letter-spacing: .05em;
}
.timeline-item.moi-nhat .status{
  background: var(--ta-ok-soft) !important; color: var(--ta-ok) !important;
}
.timeline-body{ padding: 16px 20px; color: var(--ta-fg-2); }
.update-summary h4{
  font-size: 14px; font-weight: 650; color: var(--ta-fg); margin-bottom: 9px;
}
.update-summary ul{ margin: 0; padding-left: 20px; }
.update-summary li{
  margin-bottom: 6px; font-size: 13.5px; line-height: 1.7; color: var(--ta-fg-2);
}
.update-actions{ margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.future .timeline-content{ opacity: .75; }

.info-card{
  background: var(--ta-surface) !important;
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  box-shadow: var(--e1);
  padding: 20px 22px !important; margin-bottom: 18px !important;
}
.info-card h4{
  font-size: 15.5px; font-weight: 650; color: var(--ta-fg); margin-bottom: 13px;
}
.info-card ul{ margin: 0; }
.info-card li{
  margin-bottom: 8px; font-size: 14px; line-height: 1.7; color: var(--ta-fg-2);
}
.info-card a{ color: var(--ta-accent-ink); font-weight: 600; text-decoration: none; }
.info-card a:hover{ text-decoration: underline; }


/* =====================================================================
 * 10 · HAI TRANG RỜI: guild.php VÀ jsonmessenger.php
 * ---------------------------------------------------------------------
 * Hai trang này không nạp khung dùng chung — chúng là tài liệu độc lập,
 * nên ở đây ĐƯỢC PHÉP đặt nền và phông cho cả trang. Lớp `.tr-roi` trên
 * thẻ bao ngoài giới hạn phạm vi, để 14 trang kia không dính.
 * ===================================================================== */
.tr-roi{
  font-family: var(--ta-font);
  background: var(--ta-bg); color: var(--ta-fg);
  margin: 0; padding: 0 0 48px;
  -webkit-font-smoothing: antialiased;
}
.tr-roi .container{
  max-width: 880px; margin-inline: auto;
  padding: clamp(28px, 4vw, 48px) 20px 0;
}
.tr-roi h1{
  font-size: clamp(24px, 3vw, 33px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.2; text-wrap: balance;
  text-align: center; color: var(--ta-fg);
  margin: 0 0 clamp(24px, 3vw, 34px);
}
.tr-roi h2{
  font-size: clamp(17px, 1.9vw, 21px); font-weight: 700;
  letter-spacing: -.015em; color: var(--ta-fg);
  text-decoration: none;                    /* bản cũ gạch chân mọi h2 */
  padding-left: 13px; border-left: 4px solid var(--ta-accent);
  margin: 34px 0 16px;
}
.tr-roi h3{ font-size: 16px; font-weight: 650; color: var(--ta-fg); }
.tr-roi .section{
  background: var(--ta-surface);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  box-shadow: var(--e1);
  padding: 20px 24px; margin-bottom: 16px;
}
.tr-roi .step-title{
  font-size: 15px; font-weight: 650; color: var(--ta-fg); margin-bottom: 7px;
}
.tr-roi .sub{ font-weight: 400; color: var(--ta-fg-3); }
.tr-roi ul{ margin: 0 0 14px; padding-left: 26px; }
.tr-roi ul ul{ margin-bottom: 0; }
.tr-roi li{
  margin-bottom: 5px; font-size: 14.5px; line-height: 1.7; color: var(--ta-fg-2);
}
.tr-roi p{ font-size: 14.5px; line-height: 1.7; color: var(--ta-fg-2); }

/* Công cụ tạo tin nhắn JSON */
.tr-roi .form-container{
  display: inline-block; text-align: left;
  max-width: 800px; width: 100%;
  background: var(--ta-surface);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  box-shadow: var(--e1);
  padding: clamp(20px, 3vw, 30px);
}
.tr-roi .form-group{ margin-bottom: 16px; text-align: left; }
.tr-roi label{ font-size: 13.5px; font-weight: 600; color: var(--ta-fg-2); }
.tr-roi input[type="text"], .tr-roi input[type="number"],
.tr-roi select, .tr-roi textarea{
  background: var(--ta-surface-2);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-sm);
  color: var(--ta-fg);
  font-family: var(--ta-font); font-size: 14px; line-height: 1.5;
  padding: 10px 13px;
}
.tr-roi textarea{ font-family: var(--ta-mono); font-size: 13px; }
.tr-roi input:focus, .tr-roi select:focus, .tr-roi textarea:focus{
  outline: 2px solid var(--ta-accent); outline-offset: 1px;
  border-color: transparent;
}
.tr-roi button,
.tr-roi .generate-btn, .tr-roi .copy-btn{
  background: var(--ta-accent); color: #FFFFFF;
  border: 0; border-radius: var(--ta-r-sm);
  font-family: var(--ta-font); font-size: 14px; font-weight: 650;
  padding: 11px 22px; cursor: pointer;
  transition: background var(--ta-fast);
}
.tr-roi button:hover,
.tr-roi .generate-btn:hover, .tr-roi .copy-btn:hover{ background: var(--ta-accent-ink); }
.tr-roi .copy-btn{ padding: 8px 16px; font-size: 13px; }
.tr-roi .json-outputs{ margin-top: 18px; }
.tr-roi .json-box{
  background: var(--ta-surface);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  box-shadow: var(--e1);
  padding: 18px 20px;
}
.tr-roi .json-box h3{
  font-size: 14px; font-weight: 650; color: var(--ta-fg); margin: 0 0 12px;
}
.tr-roi .explanation{ font-size: 13px; line-height: 1.65; color: var(--ta-fg-3); }
.tr-roi .order-size-row, .tr-roi .tp-row{
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}


/* =====================================================================
 * 11 · HỘP LƯU Ý VÀ BẢNG Ở CÁC TRANG NHẬT KÝ CẬP NHẬT
 * ---------------------------------------------------------------------
 * Bốn trang nhật ký viết thẳng màu nền vào `style=` cho từng hộp: đo
 * được 11 màu nền khác nhau cho cùng bốn loại thông báo, và mười dải
 * chuyển sắc khác nhau cho mười tiêu đề phiên bản. Ở đây bốn loại →
 * bốn lớp, lấy đúng bộ màu ngữ nghĩa chung của cả web.
 * ===================================================================== */
.tp-hop, .tp-hop-tin, .tp-hop-ok, .tp-hop-luu-y, .tp-hop-loi{
  border-radius: var(--ta-r);
  padding: 16px 20px; margin-bottom: 20px;
  font-size: 14.5px; line-height: 1.7;
}
.tp-hop{
  background: var(--ta-surface); border: 1px solid var(--ta-line);
  color: var(--ta-fg-2);
}
.tp-hop-tin{
  background: var(--ta-info-soft); border: 1px solid #C9D6F5;
  border-left: 3px solid var(--ta-info); color: var(--ta-info);
}
.tp-hop-ok{
  background: var(--ta-ok-soft); border: 1px solid #BFE0D2;
  border-left: 3px solid var(--ta-ok); color: var(--ta-ok);
}
.tp-hop-luu-y{
  background: var(--ta-warn-soft); border: 1px solid #EBD9A8;
  border-left: 3px solid var(--ta-warn); color: var(--ta-warn);
}
.tp-hop-loi{
  background: var(--ta-err-soft); border: 1px solid #E8C6C6;
  border-left: 3px solid var(--ta-err); color: var(--ta-err);
}
/* chữ trong hộp lấy màu của hộp, không lấy màu chung của trang */
.tp-hop-tin h2, .tp-hop-tin h3, .tp-hop-tin h4, .tp-hop-tin p, .tp-hop-tin li,
.tp-hop-ok  h2, .tp-hop-ok  h3, .tp-hop-ok  h4, .tp-hop-ok  p, .tp-hop-ok  li,
.tp-hop-luu-y h2, .tp-hop-luu-y h3, .tp-hop-luu-y h4, .tp-hop-luu-y p, .tp-hop-luu-y li,
.tp-hop-loi h2, .tp-hop-loi h3, .tp-hop-loi h4, .tp-hop-loi p, .tp-hop-loi li{
  color: inherit;
}
.tp-hop-tin h2, .tp-hop-ok h2, .tp-hop-luu-y h2, .tp-hop-loi h2,
.tp-hop h2{
  border-left: 0; padding-left: 0; margin-top: 0;
}
/* Chỉ `code`, KHÔNG `pre`. Viết `.tp-hop pre{background:transparent}` thì
   một khối mã nằm trong hộp sẽ mất nền tối của nó, mà màu chữ sáng
   (#E6EDF3, do `.update-content pre` đặt, cụ thể hơn nên không bị đè)
   vẫn còn — chữ sáng trên nền sáng, đo được 1,11:1 ở /update/copytrade.
   Khối mã tối nằm trong hộp nhạt là đúng, cứ để nguyên. */
.tp-hop code{ background: transparent; padding: 0; }

/* Dải tiêu đề của từng phiên bản */
.tp-bang-ron{
  background: linear-gradient(150deg, #172026, #1E2C32);
  color: #FFFFFF;
  border-radius: var(--ta-r-lg);
  padding: 20px 24px; margin-bottom: 30px;
}
.tp-bang-ron h1, .tp-bang-ron h2, .tp-bang-ron h3, .tp-bang-ron h4{
  color: #FFFFFF; border-left: 0; padding-left: 0; margin-top: 0;
}
.tp-bang-ron p, .tp-bang-ron li{ color: rgba(255,255,255,.80); }

/* Bảng trong thân nhật ký — bản cũ kẻ ô bằng `border: 1px solid #ddd`
   viết vào từng ô một, mười lăm lần trong một trang. */
.update-content table{
  width: 100%; border-collapse: collapse; margin-bottom: 20px;
  background: var(--ta-surface-2);
  border: 1px solid var(--ta-line); border-radius: var(--ta-r);
  overflow: hidden;
}
.update-content th{
  background: var(--ta-surface); text-align: left;
  font-family: var(--ta-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ta-fg-3);
  border-bottom: 1px solid var(--ta-line); padding: 12px 14px;
}
.update-content td{
  font-size: 13.5px; line-height: 1.65; color: var(--ta-fg-2);
  border-bottom: 1px solid var(--ta-line-2); padding: 12px 14px;
  vertical-align: top;
}
.update-content tr:last-child td{ border-bottom: 0; }
.tp-hang-sang td{ background: var(--ta-ok-soft); color: var(--ta-ok); }
/* đường kẻ ngang ngăn giữa hai phiên bản */
.update-content hr{
  border: 0; border-top: 1px solid var(--ta-line); margin: 40px 0;
}

/* Bề ngang của thân bài. Bản cũ đặt trong style= kèm padding-top 60px
   để tránh một thanh menu cố định mà chính trang đó tự dựng lên. */
.container.tp-hep{ max-width: 1040px; }

/* Màu họ sản phẩm cho dải mở đầu của ba trang hướng dẫn */
.setup-hero.ph-dca { --ph: #0F766E; }
.setup-hero.ph-tv  { --ph: #27479E; }
.setup-hero.ph-copy{ --ph: #5B3A8E; }
.setup-hero.ph-m5m { --ph: #0D6E8C; }   /* MT5 Manager (21/09/2026) */


/* =====================================================================
 * 12 · BỘ LỌC CHỈ BÁO KỸ THUẬT
 * ---------------------------------------------------------------------
 * intro_sections/accordion/indicator_filters.php — 29 bộ lọc chia thành
 * tám nhóm, nằm trong một mục xếp gấp ở trang guilde/dcabot.
 *
 * MÀU Ở ĐÂY MANG TIN, KHÔNG PHẢI TRANG TRÍ. Tám nhóm là tám họ chỉ báo
 * khác nhau; mục lục dính ở đầu dùng lại đúng màu ấy để người đọc biết
 * mình đang ở nhóm nào. Nên giữ tám màu — chỉ đổi chỗ lấy màu.
 *
 * Bản cũ lấy thẳng bảng màu mặc định của Bootstrap ở độ bão hoà cao
 * nhất (#0dcaf0, #fd7e14, #dc3545…) rồi đổ chuyển sắc vào đầu mỗi nhóm,
 * trên một dải nền xanh đen. Giữa một trang sáng, cả cụm đọc ra như một
 * mảng cầu vồng rời khỏi phần còn lại. Tám màu dưới đây cùng dải sắc
 * nhưng đã hạ xuống độ sáng dùng được: mỗi màu đạt tối thiểu 4,5:1 khi
 * làm chữ trên nền trắng — mà tỉ lệ tương phản là đối xứng, nên chữ
 * trắng trên nền màu đó cũng đạt đúng chừng ấy.
 *
 * Số đo thật, chữ trên #FFFFFF (đo lại nếu đổi màu):
 *   h1 #0F766E  5,5:1     h5 #4A5664  8,0:1
 *   h2 #1B6B3A  6,4:1     h6 #8A2F62  7,9:1
 *   h3 #5B3A8E  9,1:1     h7 #27479E 10,0:1
 *   h4 #94500B  5,6:1     h8 #A62222  7,5:1
 * ===================================================================== */
.bl-h1{ --nh: #0F766E; }   /* dao động   — trước: #0dcaf0 lơ  */
.bl-h2{ --nh: #1B6B3A; }   /* xu hướng   — trước: #198754     */
.bl-h3{ --nh: #5B3A8E; }   /* kênh giá   — trước: #6f42c1     */
.bl-h4{ --nh: #94500B; }   /* biến động  — trước: #fd7e14 cam */
.bl-h5{ --nh: #4A5664; }   /* khối lượng — trước: #6c757d xám */
.bl-h6{ --nh: #8A2F62; }   /* chiến lược — trước: #28a745, trùng hệt nhóm xu hướng */
.bl-h7{ --nh: #27479E; }   /* combine    — trước: #0d6efd     */
.bl-h8{ --nh: #A62222; }   /* action     — trước: #dc3545     */

/* ---- Mục lục dính ở đầu ---------------------------------------------
 * Bản cũ để `top: 0`, mà thanh điều hướng của web lại cố định ở đúng
 * chỗ đó — mục lục trượt lên rồi chui vào dưới thanh menu. Nay nó dừng
 * ngay dưới thanh menu.
 * ------------------------------------------------------------------ */
.bl-muc-luc{
  position: sticky; top: calc(var(--tc-bar, 62px) + 8px); z-index: 10;
  background: var(--ta-surface-2);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r);
  box-shadow: var(--e1);
}
.bl-muc-luc__nhan{
  font-family: var(--ta-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ta-fg-3);
}
.btn.bl-nut{
  background: color-mix(in srgb, var(--nh) 7%, #FFFFFF);
  color: var(--nh);
  border: 1px solid color-mix(in srgb, var(--nh) 28%, #FFFFFF);
  border-radius: var(--ta-r-pill);
  font-size: 12.5px; font-weight: 600;
  padding: 5px 13px;
}
.btn.bl-nut:hover{
  background: color-mix(in srgb, var(--nh) 16%, #FFFFFF);
  border-color: color-mix(in srgb, var(--nh) 45%, #FFFFFF);
  color: var(--nh);
}

/* ---- Khung một nhóm -------------------------------------------------- */
.bl-nhom{
  border: 1px solid color-mix(in srgb, var(--nh) 32%, #FFFFFF);
  border-radius: var(--ta-r);
  box-shadow: var(--e1);
  overflow: hidden;
}
.bl-dau{
  background: var(--nh); color: #FFFFFF;
  padding: 11px 16px;
  font-size: 14.5px;
}
.bl-dau strong{ color: #FFFFFF; font-weight: 700; letter-spacing: -.01em; }
.bl-dau__phu{
  font-size: 12.5px; font-weight: 400;
  color: rgba(255,255,255,.80); opacity: 1;
}
/* ba mục cuối là <details>, đầu mục của chúng là <summary> bấm mở được */
summary.bl-dau{
  cursor: pointer; font-weight: 700; list-style: none;
  padding: 13px 16px; font-size: 15.5px;
}
summary.bl-dau::-webkit-details-marker{ display: none; }
.bl-than{
  background: var(--ta-surface);
  padding: 12px 16px;
}

/* ---- Từng bộ lọc ----------------------------------------------------- */
.bl-mo{
  cursor: pointer; font-weight: 600; padding: 7px 0;
  font-size: 14.5px; color: var(--ta-fg);
  list-style: none; display: flex; align-items: center; gap: 9px;
}
.bl-mo::-webkit-details-marker{ display: none; }
/* Dấu tam giác mặc định của trình duyệt bị `list-style:none` xoá mất,
   nên vẽ lại một dấu xoay được theo trạng thái mở. */
.bl-mo::before{
  content: "▸"; flex: none;
  color: var(--ta-fg-3); font-size: 13px; line-height: 1;
  transition: transform var(--ta-fast), color var(--ta-fast);
}
.bl-mo:hover{ color: var(--ta-accent-ink); }
.bl-mo:hover::before{ color: var(--ta-accent); }
details[open] > .bl-mo{ color: var(--ta-accent-ink); }
details[open] > .bl-mo::before{ transform: rotate(90deg); color: var(--ta-accent); }
.bl-than > details{
  border-bottom: 1px solid var(--ta-line-2);
}
.bl-than > details:last-child{ border-bottom: 0; }
.bl-tom{
  padding: 4px 0 12px 22px;
  font-size: 14px; line-height: 1.7; color: var(--ta-fg-2);
}
.bl-tom strong{ color: var(--ta-fg); }


/* =====================================================================
 * 13 · HỘP THÔNG BÁO CỦA BOOTSTRAP
 * ---------------------------------------------------------------------
 * Trang hướng dẫn dcabot dùng `.alert-*` ở 40 chỗ. Bootstrap 5.3 tô
 * chúng bằng bảng màu pastel riêng của nó, không phải bộ màu ngữ nghĩa
 * của web — cạnh `.tip-box` và `.warning-box` ngay bên trên thì thành
 * hai họ màu cho cùng một việc. Ở đây kéo về một họ.
 * ===================================================================== */
.alert{
  border-radius: var(--ta-r); border: 1px solid var(--ta-line);
  padding: 14px 17px; font-size: 14px; line-height: 1.7;
}
.alert-primary, .alert-info{
  background: var(--ta-info-soft); color: var(--ta-info);
  border-color: #C9D6F5; border-left: 3px solid var(--ta-info);
}
.alert-success{
  background: var(--ta-ok-soft); color: var(--ta-ok);
  border-color: #BFE0D2; border-left: 3px solid var(--ta-ok);
}
.alert-warning{
  background: var(--ta-warn-soft); color: var(--ta-warn);
  border-color: #EBD9A8; border-left: 3px solid var(--ta-warn);
}
.alert-danger{
  background: var(--ta-err-soft); color: var(--ta-err);
  border-color: #E8C6C6; border-left: 3px solid var(--ta-err);
}
.alert-secondary, .alert-light, .alert-dark{
  background: var(--ta-surface); color: var(--ta-fg-2);
  border-color: var(--ta-line); border-left: 3px solid var(--ta-fg-3);
}
.alert strong, .alert h4, .alert h5, .alert p, .alert li{ color: inherit; }
.alert code{ background: rgba(23,32,38,.07); color: inherit; }
.alert a{ color: inherit; font-weight: 650; }


/* =====================================================================
 * 14 · MÀN HÌNH HẸP
 * ===================================================================== */
@media (max-width: 767.98px){
  .stat-value{ font-size: 21px !important; }
  .config-tabs{ flex-direction: column; }
  .config-tab{ padding: 12px 14px; font-size: 14px; }
  .toc-2col{ columns: 1; }
  .panel-guide{ padding: 22px 18px; }
  .timeline-item{ padding-left: 52px; }
  .timeline::before{ left: 17px; }
  .timeline-marker{ width: 36px; height: 36px; font-size: 11px; }
  .detail-table th, .detail-table td{ padding: 10px 12px !important; }
}