/* ==========================================================================
   DCI VIỆT NAM — TIN TỨC (danh sách, chuyên mục, tìm kiếm, chi tiết bài viết)
   includes/tin-tuc.php · templates/tin-tuc-luu-tru.php · templates/bai-viet.php
   Thẻ bài viết (.the.the-bv), nhãn, nút dùng lại từ dci-trang-chu.css.
   ========================================================================== */

.dci-tt-khung { width: 90%; max-width: 1152px; margin: 0 auto; position: relative; }
.dci-tt-doc { max-width: 760px; }
.dci-tc.dci-tt-bai, .dci-tc.dci-tt-trang-luu-tru { background: #fff; }
/* Nhãn nhỏ (vạch + chữ in hoa) */
.dci-tc .nhan { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--dci-gold-dam); margin-bottom: 12px; }
.dci-tc .nhan::before { content: ""; width: 26px; height: 1.5px; background: currentColor; flex: none; }
.dci-tc .dci-tt-hop-cta .nhan::before { display: none; }

/* ---------- Banner (chuyên mục, tìm kiếm, bài viết) ---------- */
.dci-tc .dci-tt-hero { position: relative; overflow: hidden; color: #fff; padding: 140px 0 64px; background: radial-gradient(ellipse at 80% 40%, #1a2aa0 0%, var(--dci-navy) 55%, #000040 100%); }
.dci-tc .dci-tt-hero::after { content: ""; position: absolute; right: -8%; top: 50%; width: 560px; height: 560px; transform: translateY(-50%); background: url(../img/pt-tia-vang.png) center/contain no-repeat; opacity: .14; pointer-events: none; }
.dci-tc .dci-tt-hero .nhan { color: var(--dci-gold); }
.dci-tc .dci-tt-hero h1 { font-family: var(--dci-font); font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: #fff; padding: 0; margin: 0; }
.dci-tc .dci-tt-hero .mo-ta { color: #d3d6f0; margin-top: 14px; max-width: 640px; }
.dci-tc .dci-tt-duong-dan { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: #aab0dc; margin-bottom: 18px; }
.dci-tc .dci-tt-duong-dan a { color: #d3d6f0; }
.dci-tc .dci-tt-duong-dan a:hover { color: #fff; }
.dci-tc .dci-tt-tim { display: flex; max-width: 460px; margin-top: 26px; background: #fff; border-radius: 99px; padding: 5px; }
.dci-tc .dci-tt-tim input[type=search] { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 14px; color: var(--dci-chu); padding: 0 16px; }
.dci-tc .dci-tt-tim button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--dci-cta); color: #fff; display: grid; place-items: center; cursor: pointer; }


/* ---------- Danh sách ---------- */
.dci-tc .dci-tt-noi-dung { padding: 56px 0 100px; }
.dci-tc .dci-tt-loc { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.dci-tc .dci-tt-loc a { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--dci-navy); border: 1px solid var(--dci-vien); border-radius: 99px; padding: 8px 18px; transition: .2s; }
.dci-tc .dci-tt-loc a span { font-size: 11px; font-weight: 600; color: var(--dci-chu-mo); }
.dci-tc .dci-tt-loc a:hover { border-color: var(--dci-navy); }
.dci-tc .dci-tt-loc a.chon { background: var(--dci-navy); border-color: var(--dci-navy); color: #fff; }
.dci-tc .dci-tt-loc a.chon span { color: var(--dci-gold); }
.dci-tc .dci-tt-luoi { gap: 26px; }
.dci-tc .dci-tt-luoi .the-than h3 { font-size: 16px; }

/* Bài nổi bật */
.dci-tc .dci-tt-noi-bat { display: grid; grid-template-columns: 1.15fr 1fr; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--bong); margin-bottom: 36px; color: var(--dci-chu); transition: .25s; }
.dci-tc .dci-tt-noi-bat:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(var(--dci-navy-rgb), .14); }
.dci-tc .dci-tt-noi-bat-anh { min-height: 340px; }
.dci-tc .dci-tt-noi-bat-than { padding: 40px 40px 36px; display: flex; flex-direction: column; gap: 10px; }
.dci-tc .dci-tt-noi-bat .nhan-noi-bat { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--dci-gold); color: var(--dci-navy); border-radius: 99px; padding: 3px 12px; }
.dci-tc .dci-tt-noi-bat h2 { font-family: var(--dci-font); font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; line-height: 1.3; color: var(--dci-navy); margin: 0; padding: 0; }
.dci-tc .dci-tt-noi-bat p { color: var(--dci-chu-phu); font-size: 15px; }
.dci-tc .dci-tt-noi-bat .ngay-dang { margin-top: auto; }
.dci-tc .dci-tt-noi-bat .doc-tiep { color: var(--dci-blue); font-weight: 600; }

/* Phân trang */
.dci-tc .dci-tt-trang { margin-top: 48px; }
.dci-tc .dci-tt-trang ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 0; }
.dci-tc .dci-tt-trang :is(a, span) { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--dci-vien); font-size: 14px; font-weight: 600; color: var(--dci-navy); }
.dci-tc .dci-tt-trang a:hover { border-color: var(--dci-navy); }
.dci-tc .dci-tt-trang .current { background: var(--dci-navy); border-color: var(--dci-navy); color: #fff; }
.dci-tc .dci-tt-trong { text-align: center; padding: 64px 24px; border: 1px dashed var(--dci-vien); border-radius: 16px; }
.dci-tc .dci-tt-trong h3 { color: var(--dci-navy); font-size: 20px; }
.dci-tc .dci-tt-trong p { color: var(--dci-chu-phu); }

/* ---------- Chi tiết bài viết ---------- */
.dci-tc .dci-tt-hero-bai { padding: 140px 0 120px; }
.dci-tc .dci-tt-chip { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--dci-gold); color: var(--dci-navy); border-radius: 99px; padding: 4px 12px; margin-bottom: 16px; }
.dci-tc .dci-tt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 22px; font-size: 14px; color: #c8cbe6; }
.dci-tc .dci-tt-meta .tac-gia { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; }
.dci-tc .dci-tt-meta .vong { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--dci-gold); display: grid; place-items: center; color: var(--dci-gold); font-weight: 700; }
.dci-tc .dci-tt-meta > span + span::before { content: "·"; margin-right: 22px; color: #6d72a8; }
.dci-tc .dci-tt-meta > span.tac-gia + span::before { content: none; }
.dci-tc .dci-tt-anh-dau { margin: -88px 0 0; position: relative; z-index: 2; }
.dci-tc .dci-tt-anh-dau .dci-tt-khung { max-width: 980px; }
.dci-tc .dci-tt-anh-dau img { width: 100%; max-height: 540px; object-fit: cover; border-radius: 16px; box-shadow: 0 24px 60px rgba(var(--dci-navy-rgb), .2); display: block; }

/* Nội dung bài */
.dci-tc .dci-tt-than { padding: 56px 0 0; }
.dci-tc .dci-tt-than .entry-content { font-size: 17px; line-height: 1.85; color: var(--dci-chu); }
.dci-tc .dci-tt-than .entry-content > *:first-child { margin-top: 0; }
.dci-tc .dci-tt-than .entry-content p { margin: 0 0 1.3em; padding: 0; color: var(--dci-chu); font-size: 17px; line-height: 1.85; }
.dci-tc .dci-tt-than .entry-content :is(h2, h3, h4) { font-family: var(--dci-font); color: var(--dci-navy); font-weight: 700; line-height: 1.35; margin: 1.8em 0 .6em; padding: 0; }
.dci-tc .dci-tt-than .entry-content h2 { font-size: 26px; }
.dci-tc .dci-tt-than .entry-content h3 { font-size: 21px; }
.dci-tc .dci-tt-than .entry-content h4 { font-size: 18px; }
.dci-tc .dci-tt-than .entry-content a { color: var(--dci-blue); text-decoration: underline; text-underline-offset: 3px; }
.dci-tc .dci-tt-than .entry-content :is(ul, ol) { margin: 0 0 1.3em 1.4em; padding: 0; }
.dci-tc .dci-tt-than .entry-content li { margin-bottom: .5em; }
.dci-tc .dci-tt-than .entry-content li::marker { color: var(--dci-gold-dam); }
.dci-tc .dci-tt-than .entry-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 1em 0; }
.dci-tc .dci-tt-than .entry-content figure { margin: 1.6em 0; }
.dci-tc .dci-tt-than .entry-content figcaption { font-size: 13px; color: var(--dci-chu-mo); text-align: center; margin-top: 6px; }
.dci-tc .dci-tt-than .entry-content blockquote { margin: 1.8em 0; padding: 22px 28px; border: 0; border-left: 3px solid var(--dci-gold); background: var(--dci-nen); border-radius: 0 12px 12px 0; font-size: 18px; font-weight: 500; color: var(--dci-navy); }
.dci-tc .dci-tt-than .entry-content blockquote p { margin: 0; color: inherit; font-size: inherit; }
/* Hộp nền tối viết sẵn trong nội dung bài (style inline): chữ đoạn văn phải sáng để đọc được */
.dci-tc .dci-tt-than .entry-content [style*="linear-gradient"] p { color: #c8cbe6 !important; }
.dci-tc .dci-tt-than .entry-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 15px; }
.dci-tc .dci-tt-than .entry-content :is(th, td) { border: 1px solid var(--dci-vien); padding: 10px 14px; text-align: left; }

/* Chân bài: thẻ, chia sẻ, hộp kêu gọi */
.dci-tc .dci-tt-chan-bai { padding-top: 20px; }
.dci-tc .dci-tt-the-tag { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.dci-tc .dci-tt-the-tag a { font-size: 13px; color: var(--dci-chu-phu); background: var(--dci-nen); border-radius: 99px; padding: 5px 14px; }
.dci-tc .dci-tt-chia-se { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 22px 0; border-top: 1px solid var(--dci-vien); border-bottom: 1px solid var(--dci-vien); }
.dci-tc .dci-tt-chia-se > span { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dci-chu-phu); margin-right: 6px; }
.dci-tc .dci-tt-chia-se :is(a, button) { display: inline-flex; align-items: center; gap: 8px; height: 40px; min-width: 40px; justify-content: center; padding: 0 12px; border-radius: 99px; border: 1px solid var(--dci-vien); background: #fff; color: var(--dci-navy); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: .2s; }
.dci-tc .dci-tt-chia-se :is(a, button):hover { border-color: var(--dci-navy); background: var(--dci-navy); color: #fff; }
.dci-tc .dci-tt-chia-se em { font-style: normal; }
.dci-tc .dci-tt-hop-cta { margin: 44px 0 0; padding: 36px 36px 34px; border-radius: 16px; color: #fff; background: radial-gradient(ellipse at 90% 20%, #1a2aa0 0%, var(--dci-navy) 60%); position: relative; overflow: hidden; }
.dci-tc .dci-tt-hop-cta::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 320px; height: 320px; background: url(../img/pt-vong-tron.png) center/contain no-repeat; opacity: .12; }
.dci-tc .dci-tt-hop-cta .nhan { color: var(--dci-gold); }
.dci-tc .dci-tt-hop-cta h2 { font-family: var(--dci-font); font-size: 24px; font-weight: 700; line-height: 1.3; color: #fff; margin: 0; padding: 0; }
.dci-tc .dci-tt-hop-cta p { color: #c8cbe6; margin-top: 10px; font-size: 15px; }
.dci-tc .dci-tt-hop-cta .nut-hang { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.dci-tc .dci-sk-nut { display: inline-flex; align-items: center; gap: 14px; font-weight: 600; font-size: 14px; border-radius: 99px; padding: 6px 6px 6px 24px; background: var(--dci-cta); color: #fff; transition: .25s; }
.dci-tc .dci-sk-nut span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); }
.dci-tc .dci-sk-nut:hover { background: var(--dci-cta-hover); color: #fff; }
.dci-tc .dci-tt-hop-cta .nut-vien { display: inline-flex; align-items: center; font-weight: 600; font-size: 14px; border-radius: 99px; padding: 12px 24px; border: 1.5px solid rgba(255,255,255,.55); color: #fff; }
.dci-tc .dci-tt-hop-cta .nut-vien:hover { background: rgba(255,255,255,.12); }

/* Bài liên quan */
.dci-tc .dci-tt-lien-quan { background: var(--dci-nen); padding: 90px 0 100px; margin-top: 80px; }
.dci-tc .dci-tt-dau-khoi { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 32px; }
.dci-tc .dci-tt-dau-khoi h2 { font-family: var(--dci-font); font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; color: var(--dci-navy); margin: 0; padding: 0; }
.dci-tc .dci-tt-dau-khoi .xem-tat-ca { font-weight: 600; font-size: 14px; color: var(--dci-blue); white-space: nowrap; }

/* Divi: ẩn tiêu đề/ảnh/sidebar mặc định nếu còn sót */
body.dci-trang-tin-tuc #sidebar, body.dci-trang-tin-tuc #main-content .container::before { display: none !important; }

/* ===== MÁY TÍNH BẢNG ===== */
@media (max-width: 980px) {
  .dci-tc .dci-tt-noi-bat { grid-template-columns: 1fr; }
  .dci-tc .dci-tt-noi-bat-anh { min-height: 0; aspect-ratio: 16 / 9; }
  .dci-tc .dci-tt-luoi { grid-template-columns: repeat(2, 1fr); }
}

/* ===== ĐIỆN THOẠI ===== */
@media (max-width: 780px) {
  .dci-tc .dci-tt-hero { padding: 110px 0 48px; }
  .dci-tc .dci-tt-hero-bai { padding: 110px 0 96px; }
  .dci-tc .dci-tt-anh-dau { margin-top: -72px; }
  .dci-tc .dci-tt-noi-bat-than { padding: 24px 22px; }
  .dci-tc .dci-tt-loc { flex-wrap: nowrap; overflow-x: auto; margin: 0 -5vw 26px; padding: 0 5vw 4px; scrollbar-width: none; }
  .dci-tc .dci-tt-loc a { flex: none; }
  .dci-tc .dci-tt-luoi { display: grid !important; grid-template-columns: 1fr !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
  .dci-tc .dci-tt-luoi > * { flex: none !important; }
  .dci-tc .dci-tt-than { padding-top: 36px; }
  .dci-tc .dci-tt-than .entry-content, .dci-tc .dci-tt-than .entry-content p { font-size: 16px; }
  .dci-tc .dci-tt-hop-cta { padding: 28px 22px; }
  .dci-tc .dci-tt-dau-khoi { flex-direction: column; align-items: flex-start; }
  .dci-tc .dci-tt-lien-quan { padding: 64px 0 72px; margin-top: 56px; }
}

/* ==========================================================================
   BẢNG MÀU MỚI (04/11/2026): banner tin tức nền sáng, header trắng không đè banner,
   hộp kêu gọi cuối bài Electric Blue.
   ========================================================================== */
.dci-tc .dci-tt-hero { color: var(--dci-chu); padding: 72px 0 56px; background: radial-gradient(ellipse at 85% 30%, var(--dci-periwinkle-nhat) 0%, var(--dci-nen) 60%); }
.dci-tc .dci-tt-hero::after { opacity: .45; filter: hue-rotate(160deg) saturate(1.6); }
.dci-tc .dci-tt-hero .nhan { color: var(--dci-blue); }
.dci-tc .dci-tt-hero h1 { color: var(--dci-navy); }
.dci-tc .dci-tt-hero .mo-ta { color: var(--dci-chu-phu); }
.dci-tc .dci-tt-duong-dan { color: var(--dci-chu-mo); }
.dci-tc .dci-tt-duong-dan a { color: var(--dci-chu-phu); }
.dci-tc .dci-tt-duong-dan a:hover { color: var(--dci-blue); }
.dci-tc .dci-tt-tim { box-shadow: 0 8px 24px rgba(var(--dci-navy-rgb), .08); border: 1px solid var(--dci-vien); }
.dci-tc .dci-tt-hero-bai { padding: 64px 0 120px; }
.dci-tc .dci-tt-meta { color: var(--dci-chu-phu); }
.dci-tc .dci-tt-meta .tac-gia { color: var(--dci-navy); }
.dci-tc .dci-tt-meta .vong { border-color: var(--dci-blue); color: var(--dci-blue); }
.dci-tc .dci-tt-meta > span + span::before { color: var(--dci-chu-mo); }
.dci-tc .dci-tt-hop-cta { background: linear-gradient(135deg, var(--dci-blue), #0a3fd8); }
.dci-tc .dci-tt-hop-cta .dci-sk-nut { background: var(--dci-gold); color: var(--dci-navy); }
.dci-tc .dci-tt-hop-cta .dci-sk-nut span { background: rgba(var(--dci-navy-rgb), .12); }
.dci-tc .dci-tt-hop-cta p { color: #dfe6ff; }
.dci-tc .dci-tt-loc a.chon span { color: var(--dci-gold); }
.dci-tc .chuyen-muc { color: var(--dci-blue); }
@media (max-width: 780px) { .dci-tc .dci-tt-hero { padding: 40px 0 44px; } .dci-tc .dci-tt-hero-bai { padding: 40px 0 96px; } }

/* Nút chính = Golden Yellow chữ Dark Blue */
.dci-tc .dci-tt-tim button { color: var(--dci-cta-chu); }
.dci-tc .dci-sk-nut, .dci-tc .dci-sk-nut:hover { color: var(--dci-cta-chu); }
.dci-tc .dci-sk-nut span { background: rgba(var(--dci-navy-rgb), .12); }

/* ==========================================================================
   TRANG DANH SÁCH (templates/danh-sach.php)
   ========================================================================== */
.dci-tc .dci-tt-loc button { display: inline-flex; align-items: center; font-family: var(--dci-font); font-size: 13.5px; font-weight: 600; color: var(--dci-navy); background: #fff; border: 1px solid var(--dci-vien); border-radius: 99px; padding: 8px 18px; cursor: pointer; transition: .2s; }
.dci-tc .dci-tt-loc button:hover { border-color: var(--dci-navy); }
.dci-tc .dci-tt-loc button.chon { background: var(--dci-navy); border-color: var(--dci-navy); color: #fff; }
.dci-tc .dci-ds-than { padding: 56px 0 100px; }
.dci-tc .dci-ds-than.dci-s-sk { background: var(--dci-periwinkle-nhat); }
.dci-tc .dci-ds-than.dci-s-gv, .dci-tc .dci-ds-than.dci-s-ve { background: var(--dci-nen); }
.dci-tc .dci-ds-luoi { gap: 24px; }
.dci-tc .dci-ds-luoi .the-gv { display: flex; flex-direction: column; align-items: stretch; }
.dci-tc .dci-ds-luoi .the-gv .lien-ket { margin-top: auto; padding-top: 12px; }
.dci-tc .dci-gv-vong-chu { display: grid; place-items: center; background: linear-gradient(160deg, var(--dci-periwinkle), var(--dci-periwinkle-nhat)) !important; }
.dci-tc .dci-gv-vong-chu span { font-size: 44px; font-weight: 700; color: var(--dci-blue); line-height: 1; }
.dci-tc .dci-ds-than .dci-tt-trong { background: #fff; }
.dci-tc .dci-ds-than .dci-tt-trong .nut-hang { margin-top: 18px; }
/* thẻ sự kiện trên nền sáng */
.dci-tc .dci-s-sk .the-sk { background: #fff; border-color: transparent; color: var(--dci-chu); box-shadow: 0 10px 30px rgba(var(--dci-navy-rgb), .08); }
.dci-tc .dci-s-sk .the-sk:hover { border-color: var(--dci-blue); transform: translateY(-4px); }
.dci-tc .dci-s-sk .the-sk .ngay { border-right-color: var(--dci-vien); }
.dci-tc .dci-s-sk .the-sk .ngay b { color: var(--dci-blue); }
.dci-tc .dci-s-sk .the-sk .ngay span { color: var(--dci-chu-phu); }
.dci-tc .dci-s-sk .the-sk h3 { color: var(--dci-navy); }
.dci-tc .dci-s-sk .the-sk p { color: var(--dci-chu-phu); }
.dci-tc .dci-s-sk .loai { border-color: var(--dci-ngoc); background: rgba(0,221,215,.12); color: var(--dci-navy); }
.dci-tc .dci-s-sk .chan-sk { border-top-color: var(--dci-vien); color: var(--dci-chu-phu); }
.dci-tc .dci-s-sk .chan-sk .gia { color: var(--dci-navy); }
.dci-tc .dci-s-sk .chan-sk .gia s { color: var(--dci-chu-mo); }
.dci-tc .dci-s-sk .chan-sk .dk { color: var(--dci-blue); }
/* dải kêu gọi vàng cuối trang */
.dci-tc .dci-ds-cta { background: var(--dci-gold); padding: 56px 0; }
.dci-tc .dci-ds-cta .dci-tt-khung { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dci-tc .dci-ds-cta h2 { font-family: var(--dci-font); font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; color: var(--dci-navy); margin: 0; padding: 0; }
.dci-tc .dci-ds-cta p { color: rgba(var(--dci-navy-rgb), .8); margin-top: 6px; }
.dci-tc .dci-ds-nut-toi { display: inline-flex; align-items: center; gap: 14px; font-weight: 600; font-size: 15px; border-radius: 99px; padding: 6px 6px 6px 26px; background: var(--dci-navy); color: #fff; transition: .25s; }
.dci-tc .dci-ds-nut-toi span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); }
.dci-tc .dci-ds-nut-toi:hover { background: var(--dci-blue); color: #fff; }
@media (max-width: 980px) { .dci-tc .dci-ds-luoi.luoi-4 { grid-template-columns: repeat(2, 1fr); } .dci-tc .dci-ds-luoi.luoi-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 780px) {
  .dci-tc .dci-ds-than { padding: 36px 0 64px; }
  .dci-tc .dci-ds-luoi { display: grid !important; grid-template-columns: 1fr !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
  .dci-tc .dci-ds-luoi.luoi-4 { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .dci-tc .dci-ds-luoi > * { flex: none !important; }
  .dci-tc .dci-ds-luoi .the-gv > :not(.anh) { padding-left: 12px; padding-right: 12px; }

  .dci-tc .dci-ds-luoi .the-gv p { display: none; }
  .dci-tc .dci-ds-cta .dci-tt-khung { flex-direction: column; align-items: flex-start; }
}
.dci-tc .dci-tt-loc :is(a, button) { white-space: nowrap; }
@media (max-width: 780px) { .dci-tc .dci-tt-loc button { flex: none; } }

/* Trang danh sách Công cụ DCI: thẻ đánh số, 5 công cụ một hàng */
.dci-tc .dci-ds-cong-cu { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.dci-tc .the-cong-cu { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 22px 24px; background: #fff; border-radius: 18px; box-shadow: 0 12px 34px rgba(0,0,102,.08); border-top: 4px solid var(--dci-gold); color: var(--dci-chu); text-decoration: none; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.dci-tc .the-cong-cu:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(0,0,102,.14); }
.dci-tc .the-cong-cu .so { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--dci-blue); color: #fff; font-weight: 800; font-size: 17px; margin-bottom: 6px; }
.dci-tc .the-cong-cu:hover .so { background: var(--dci-gold); color: var(--dci-navy); }
.dci-tc .the-cong-cu h3 { font-family: var(--dci-font); font-size: 17px; font-weight: 700; color: var(--dci-navy); line-height: 1.35; margin: 0; padding: 0; }
.dci-tc .the-cong-cu p { font-size: 14px; line-height: 1.6; color: var(--dci-chu-phu); margin: 0; padding: 0; flex: 1; }
.dci-tc .the-cong-cu .lien-ket { font-size: 14px; font-weight: 600; color: var(--dci-blue); margin-top: 4px; }
@media (max-width: 780px) { .dci-tc .dci-ds-cong-cu { grid-template-columns: 1fr 1fr; gap: 12px; } .dci-tc .the-cong-cu { padding: 18px 16px; } }