/* Đối tác nhánh Visit Vietnam (templates/_doi_tac_vn.html). Màu chỉ từ tokens.css,
   đồng bộ với trang chủ (2026-10-20):
   - Khung "Tours" (.dt-khung) = khung "Plan your own trip" của trang chủ (.tc-lap):
     nền --mt-primary, dải gold đáy (--mt-gold-bar), bo 18px như các khung .chang.
   - Ô teal (.dt-o) CHỈ trong khung nền trắng (Arriving): cùng nền + cùng kiểu hàng
     đối tác như khung Tours. Khung đã teal (Getting there) dùng đường kẻ .dt-ke.
   - Hàng đối tác = hàng chuyến mẫu trang chủ (.tc-mau a): trắng trong suốt nhẹ,
     viền trắng mờ.
   - WhatsApp = nút đỏ như "Plan my trip" (.tc-form .tc-nut--lime) — NGOẠI LỆ đã
     duyệt của luật "một nút đỏ mỗi màn hình" (tokens.css): mỗi đối tác một nút;
     Website/Email = nút viền trắng mờ trên nền teal.
   Tương phản (trên --mt-primary; hàng đối tác nền trắng 8% sáng hơn một chút):
   trắng 9,8:1 (~8,7:1 trên hàng); --mt-on-primary-muted 5,3:1 (~4,7:1 trên hàng);
   --mt-gold-text 6,5:1; trắng trên --mt-red 6,5:1. Không dùng opacity cho chữ
   phụ (dùng --mt-on-primary-muted) để số đo trên đúng. */

/* ---- Khung nền teal: khung Tours + ô teal ---- */
.dt-khung, .dt-o { background: var(--mt-primary); color: var(--mt-on-primary); }
.dt-khung { margin-top: 2.5rem; border-radius: 18px; padding: 1.4rem 1.5rem;
  box-shadow: var(--mt-gold-bar); }
/* Ô teal nằm trong khung nền trắng (Arriving). */
.dt-o { margin-top: 1.1rem; border-radius: 16px; padding: .2rem 1.1rem 1.1rem; }

/* Nhóm đối tác trong khung ĐÃ teal (Getting there): không lồng ô .dt-o, chỉ một
   đường kẻ mảnh trắng mờ phía trên. Ô .dt-o chỉ dùng trong khung nền trắng (Arriving). */
.dt-ke { margin-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.18); }

.dt-nhan { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mt-gold-text); }
.dt-khung h3 { font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
  margin-top: .3rem; font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--mt-on-primary); }

/* ---- Một nhóm (hạng mục) ---- */
.dt-nhom { margin-top: 1.1rem; }
.dt-nhom[hidden] { display: none; }
.dt-ten-nhom { font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
  font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--mt-gold-text); }
.dt-phu { margin-top: .2rem; font-size: .85rem; color: var(--mt-on-primary-muted); }

/* ---- Hàng đối tác (như hàng chuyến mẫu trang chủ) ---- */
.dt-ds { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem; }
.dt-dong { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: var(--mt-on-primary); border-radius: 16px; padding: .75rem .9rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; min-width: 0; }
.dt-ten { font-weight: 600; overflow-wrap: anywhere; }
.dt-nn { font-size: .85rem; color: var(--mt-on-primary-muted); overflow-wrap: anywhere; }

/* ---- Nút ---- */
.dt-nut-hang { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
.dt-nut { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
  font-weight: 600; font-size: .85rem; border-radius: 999px; padding: .45rem .95rem;
  min-height: 40px; white-space: nowrap; color: var(--mt-on-primary);
  background: transparent; border: 1px solid rgba(255,255,255,.4); }
.dt-nut:hover { background: rgba(255,255,255,.12); }
.dt-nut--whatsapp { background: var(--mt-red); border-color: var(--mt-red); }
.dt-nut--whatsapp:hover { background: var(--mt-red-hover); border-color: var(--mt-red-hover); }
.dt-icon { flex: none; }
.dt-khung :focus-visible, .dt-o :focus-visible, .dt-ke :focus-visible { outline: 2px solid var(--mt-on-primary); outline-offset: 2px; }

/* ---- "Show N more operators" ---- */
.dt-them { margin-top: .6rem; }
.dt-them > summary { display: inline-block; cursor: pointer; font-size: .88rem; font-weight: 700;
  list-style: none; color: var(--mt-on-primary); }
.dt-them > summary::-webkit-details-marker { display: none; }
.dt-them > summary::after { content: " ›"; }
.dt-them[open] > summary::after { content: " ‹"; }

.dt-mien-tru { margin-top: 1rem; font-size: .8rem; line-height: 1.5; color: var(--mt-on-primary-muted); }

/* ---- Chip lọc tour ---- */
.dt-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.dt-chips[hidden] { display: none; }
.dt-chip { font: 500 .88rem/1.2 var(--font-body, system-ui, sans-serif); cursor: pointer;
  padding: .4rem .95rem; min-height: 36px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.4); background: transparent; color: var(--mt-on-primary); }
.dt-chip--chon { background: var(--mt-on-primary); border-color: var(--mt-on-primary); color: var(--mt-primary); }

@media (max-width: 640px) {
  .dt-khung { padding: 1.2rem 1rem; }
  .dt-o { padding: .1rem .8rem .9rem; }
  .dt-nut-hang { margin-left: 0; width: 100%; }
}