/* =====================================================================
   TIẾN ĐẠT CORP — thẻ kiểu mẫu tham chiếu

   Chữ ký thị giác: vòng tròn chứa biểu tượng đặt tuyệt đối, đè lên mép
   trên của thẻ. Thẻ trên dải tối dùng nền tím đặc; thẻ trên nền trắng
   dùng viền tím 1px. Nút trong thẻ là viên thuốc nền trắng.
   ===================================================================== */

/* Lưới thẻ tự cân: hàng lẻ được canh giữa thay vì dồn về trái để lại ô trống.
   Dùng flex chứ không dùng grid vì grid luôn giữ nguyên số cột, số thẻ không
   chia hết sẽ để lại khoảng khuyết ở cuối hàng. */
.tdc-i4grid {
    --tdc-gap: clamp(26px, 2.4vw, 34px);
    --tdc-percot: 3;
    list-style: none; margin: 0;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--tdc-gap);
    /* chừa chỗ cho nửa vòng tròn nhô lên khỏi thẻ hàng đầu */
    padding: 56px 0 0;
}
/* flex-basis mới là thứ quyết định ngắt hàng, nên nó phải bằng đúng bề rộng
   cột — đặt basis nhỏ rồi chặn bằng max-width sẽ nhồi thừa thẻ vào một hàng.
   flex-grow 0 để thẻ lẻ ở hàng cuối giữ đúng cỡ và được canh giữa. */
.tdc-i4grid > .tdc-i4 {
    flex: 0 1 calc((100% - (var(--tdc-percot) - 1) * var(--tdc-gap)) / var(--tdc-percot));
    min-width: 0;
}
/* Bốn thẻ xếp một hàng cho gọn, dưới 1200px quay về hai hàng hai thẻ. */
.tdc-i4grid--4 { --tdc-percot: 4; }
@media (max-width: 1199px) { .tdc-i4grid--4 { --tdc-percot: 2; } }

.tdc-i4 {
    position: relative;
    background: var(--tdc-navy);
    border-radius: 10px;
    padding: 72px 28px 32px;      /* padding trên chừa chỗ cho vòng tròn */
    text-align: center;
    transition: transform .22s ease, box-shadow .22s ease;
}
.tdc-i4:hover { transform: translateY(-5px); box-shadow: 0 20px 46px rgba(1, 3, 54, .38); }

/* Vòng tròn biểu tượng — đè lên mép trên */
.tdc-i4__circle {
    position: absolute; top: -52px; left: 50%; transform: translateX(-50%);
    width: 105px; height: 105px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--tdc-foot);
    border: 2px solid #fff;
    color: var(--tdc-gold);
    transition: background-color .22s ease, color .22s ease;
}
.tdc-i4__circle svg { width: 42px; height: 42px; }
.tdc-i4:hover .tdc-i4__circle { background: var(--tdc-gold); color: var(--tdc-foot); }

.tdc-i4__title { margin: 0 0 12px; font-size: clamp(18px, 1rem + .5vw, 22px); }
.tdc-i4__title, .tdc-i4__title a { color: #fff; text-decoration: none; }
.tdc-i4__title a:hover { color: var(--tdc-gold); }
.tdc-i4__desc { margin: 0 0 22px; color: rgba(255, 255, 255, .84);
    font-size: var(--tdc-small); line-height: 1.74; }

/* Nút viên thuốc nền trắng bên trong thẻ */
.tdc-i4__more {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 11px 28px; border-radius: 50px;
    background: #fff; color: var(--tdc-foot);
    font-size: var(--tdc-small); font-weight: 700; text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}
.tdc-i4__more:hover { background: var(--tdc-gold); color: var(--tdc-foot); }

/* ---------- Biến thể trên nền trắng: viền tím, chữ tối ---------- */
.tdc-i4grid--light .tdc-i4 {
    background: #fff;
    border: 1px solid var(--tdc-navy);
}
.tdc-i4grid--light .tdc-i4:hover { box-shadow: 0 18px 40px rgba(20, 5, 106, .16); }
.tdc-i4grid--light .tdc-i4__circle {
    width: 84px; height: 84px; top: -42px;
    background: var(--tdc-navy); border-color: #fff; color: var(--tdc-gold);
}
.tdc-i4grid--light .tdc-i4__circle svg { width: 34px; height: 34px; }
.tdc-i4grid--light .tdc-i4 { padding-top: 58px; }
.tdc-i4grid--light .tdc-i4__title, .tdc-i4grid--light .tdc-i4__title a { color: var(--tdc-ink); }
.tdc-i4grid--light .tdc-i4__desc { color: var(--tdc-muted); }

/* ---------- Hoạ tiết chấm trên dải tối ---------- */
.tdc-dots { position: relative; overflow: hidden; }
.tdc-dots::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .13) 1.5px, transparent 1.6px);
    background-size: 26px 26px;
    opacity: .55;
}
.tdc-dots > * { position: relative; z-index: 1; }

/* ---------- Khối Giới thiệu hai cột ---------- */
.tdc-about2__grid { display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 70px); align-items: center; }
.tdc-about2__media { display: flex; justify-content: center; }
.tdc-illus, .tdc-about2__img { width: 100%; max-width: 540px; height: auto; display: block; }
.tdc-about2__img { border-radius: 14px; }
.tdc-about2__text h2 { margin: 12px 0 16px; }
.tdc-about2__lead { color: var(--tdc-muted); margin-bottom: 26px; }

.tdc-about2__list { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 18px; }
.tdc-about2__list li { display: flex; align-items: center; gap: 16px;
    color: var(--tdc-ink); font-weight: 600; font-size: clamp(15.5px, 1rem + .15vw, 17.5px); }
.tdc-about2__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; flex: 0 0 48px; border-radius: 10px;
    background: var(--tdc-navy); color: #fff;
}
.tdc-about2__ico svg { width: 23px; height: 23px; }

/* ---------- Dòng nhỏ kiểu mẫu: chữ nhỏ, giãn chữ, có gạch ngắn ---------- */
.tdc-head { text-align: center; }
.tdc-head .tdc-eyebrow {
    display: inline-block; position: relative;
    font-size: 15px; font-weight: 700; letter-spacing: .06em;
    text-transform: capitalize; margin-bottom: 14px; padding-bottom: 12px;
}
.tdc-head .tdc-eyebrow::after {
    content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 56px; height: 3px; border-radius: 2px; background: var(--tdc-gold);
}
.tdc-fields .tdc-head .tdc-eyebrow, .tdc-abfaq .tdc-head .tdc-eyebrow { color: var(--tdc-gold); }

/* ---------- Màn hình nhỏ ---------- */
@media (max-width: 1080px) {
    .tdc-i4grid { --tdc-percot: 2; }
    .tdc-about2__grid { grid-template-columns: 1fr; }
    .tdc-about2__media { order: -1; }
}
@media (max-width: 700px) {
    .tdc-i4grid { --tdc-percot: 1; --tdc-gap: 64px; }
    .tdc-about2__list li { font-size: 15.5px; }
}

/* =====================================================================
   HỎI ĐÁP — hai cột trên dải tối
   ===================================================================== */
.tdc-faq4 { background-color: var(--tdc-deep); color: #fff; }
.tdc-faq4 .tdc-head h2 { color: #fff; }
.tdc-faq4 .tdc-head .tdc-eyebrow { color: var(--tdc-gold); }

.tdc-faq4__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.2vw, 30px); }
.tdc-faq4__col { display: grid; align-content: start; gap: 14px; }

.tdc-faq4__item { border-radius: 0; }

/* Thanh câu hỏi: vuông góc, nền navy than, chữ trắng */
.tdc-faq4__q {
    cursor: pointer; list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 48px; padding: 13px 20px;
    background: var(--tdc-foot); color: #fff;
    font-size: clamp(15px, 1rem + .05vw, 16.5px); font-weight: 600; line-height: 1.45;
    transition: background-color .18s ease, color .18s ease;
}
.tdc-faq4__q::-webkit-details-marker { display: none; }
.tdc-faq4__q svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--tdc-gold);
    transition: transform .22s ease; }
.tdc-faq4__q:hover { background: var(--tdc-gold); color: var(--tdc-foot); }
.tdc-faq4__q:hover svg { color: var(--tdc-foot); }
.tdc-faq4__item[open] .tdc-faq4__q svg { transform: rotate(180deg); }

/* Khung trả lời: trắng mờ trên dải tối, kèm ảnh nhỏ bên trái */
.tdc-faq4__a {
    display: flex; align-items: flex-start; gap: 18px;
    padding: 24px 22px;
    background: rgba(255, 255, 255, .1);
}
.tdc-faq4__a p { margin: 0; color: rgba(255, 255, 255, .88);
    font-size: var(--tdc-small); line-height: 1.78; }
.tdc-faq4__img { width: 100px; height: 65px; flex: 0 0 100px;
    object-fit: cover; border-radius: 4px; display: block; }

.tdc-faq4__foot { text-align: center; margin-top: clamp(30px, 3vw, 44px); }

@media (max-width: 860px) {
    .tdc-faq4__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .tdc-faq4__a { flex-direction: column; gap: 14px; }
    .tdc-faq4__img { width: 100%; height: 150px; flex: none; }
}

/* =====================================================================
   DẢI TỐI CÓ ẢNH NỀN

   Mẫu tham chiếu không tô màu phẳng cho các dải tối — nó đặt ảnh chụp tối
   phủ kín rồi viết chữ trắng lên. Lớp navy đậm .9 phủ trên ảnh giữ tương
   phản chữ trắng ngang với nền phẳng, nên không phụ thuộc ảnh sáng hay tối.
   ===================================================================== */
.tdc-band--photo {
    background-image:
        linear-gradient(rgba(1, 1, 63, .9), rgba(1, 1, 63, .9)),
        var(--tdc-bandbg);
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll, scroll;
}


/* Dải tối kế thừa chữ trắng. Trước đó `.tdc-fields` vẫn kế thừa màu mực #111
   của body — chữ nào thêm vào mà không tự khai màu sẽ chìm vào nền. */
.tdc-fields, .tdc-faq4 { color: #fff; }

/* =====================================================================
   DẢI SỐ LIỆU

   Trước đây chỉ là mấy con số trôi giữa một dải trống. Nay bám đúng ngôn ngữ
   của mẫu: biểu tượng vàng trong vòng tròn viền mảnh, con số lớn, nhãn nhỏ,
   các mục chia đều hết bề ngang và ngăn nhau bằng vạch dọc mảnh.
   ===================================================================== */
.tdc-stats__grid {
    display: flex; flex-wrap: wrap;
    align-items: stretch; justify-content: center;
    gap: 0;
}
.tdc-stats__grid > .tdc-stat {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 6px clamp(14px, 2vw, 28px);
    text-align: center;
}
/* Vạch ngăn giữa các mục — không vẽ trước mục đầu tiên của mỗi hàng */
.tdc-stats__grid > .tdc-stat + .tdc-stat { border-left: 1px solid rgba(255, 255, 255, .16); }

.tdc-stat__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 58px; height: 58px; border-radius: 50%;
    border: 1.5px solid rgba(246, 198, 13, .45);
    color: var(--tdc-gold);
    transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
.tdc-stat__ico svg { width: 26px; height: 26px; }
.tdc-stat:hover .tdc-stat__ico { background: var(--tdc-gold); color: var(--tdc-foot); border-color: var(--tdc-gold); }

.tdc-stat__num { line-height: 1; letter-spacing: -.01em; }
.tdc-stat__lbl { font-size: var(--tdc-small); line-height: 1.5; }

/* Bốn mục thì có bước trung gian hai hàng hai mục — chia hết nên không lẻ. */
@media (max-width: 980px) {
    .tdc-stats__grid--4 > .tdc-stat { flex-basis: 50%; padding-block: 22px; }
    .tdc-stats__grid--4 > .tdc-stat:nth-child(odd) { border-left: 0; }
    .tdc-stats__grid--4 > .tdc-stat:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .16); }
}
/* Ba mục thì nhảy thẳng xuống một cột: hai cột sẽ để lẻ một mục ở hàng dưới. */
@media (max-width: 760px) {
    .tdc-stats__grid--3 > .tdc-stat { flex-basis: 100%; }
}
@media (max-width: 560px) {
    .tdc-stats__grid > .tdc-stat { flex-basis: 100%; }
}
/* Một cột: đổi vạch dọc thành vạch ngang */
@media (max-width: 760px) {
    .tdc-stats__grid--3 > .tdc-stat { border-left: 0; padding-block: 22px; }
    .tdc-stats__grid--3 > .tdc-stat + .tdc-stat { border-top: 1px solid rgba(255, 255, 255, .16); }
}
@media (max-width: 560px) {
    .tdc-stats__grid > .tdc-stat { border-left: 0; padding-block: 22px; }
    .tdc-stats__grid > .tdc-stat + .tdc-stat { border-top: 1px solid rgba(255, 255, 255, .16); }
}