/* ==========================================================================
   Dr Tống Hiền — trang-con.css
   Giao diện riêng TRANG CON (khuôn trong site/public/_mau/).
   Chỉ dùng token khai báo ở :root trong style.css; lớp mới có tiền tố tc-
   để không trùng lớp của trang chủ. Nạp SAU style.css.
   ========================================================================== */

/* Khung đọc hẹp: breadcrumb và bài nội dung cùng một độ rộng */
.tc-trang {
  max-width: 46rem;
}

/* --------------------------------------------------------------------------
   Đường dẫn (breadcrumb)
   Cấu trúc: <nav class="tc-breadcrumb" aria-label="Đường dẫn"> > ol > li
   (thẻ lặp: _mau/the/breadcrumb.html). Mục đang xem là <span aria-current="true">.
   -------------------------------------------------------------------------- */

.tc-breadcrumb {
  margin-bottom: var(--space-4);
  font-size: 0.9rem;
}

.tc-breadcrumb__ds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tc-breadcrumb__muc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

/* Dấu "/" giữa hai mục, vẽ bằng CSS (không thêm chữ vào nội dung) */
.tc-breadcrumb__muc + .tc-breadcrumb__muc::before {
  content: "/";
  color: var(--color-text-muted);
}

/* T232: liên kết dùng vàng nâu (đạt AA trên nền trắng), không còn teal */
.tc-breadcrumb__lien-ket {
  color: var(--color-vang-nau);
  text-underline-offset: 2px;
}

.tc-breadcrumb__chu {
  color: var(--color-text-muted);
}

/* Mục đang xem: chữ đậm, màu chữ thân bài; chỉ khác biệt bằng hình thức,
   trạng thái vẫn đọc được qua aria-current="true". */
.tc-breadcrumb__chu[aria-current="true"] {
  color: var(--color-navy);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Bài nội dung tĩnh (Giới thiệu, Cam kết, Bác sĩ)
   Phần chữ Markdown dùng .noi-dung của style.css; ở đây chỉ chỉnh H1.
   -------------------------------------------------------------------------- */

.tc-bai {
  margin-top: var(--space-2);
}

.tc-bai__tieu-de {
  margin-bottom: var(--space-5);
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
}

/* --------------------------------------------------------------------------
   Trang danh sách (/cong-nghe, /bang-gia, /ket-qua)
   Cùng khung với trang bài nhưng rộng hơn cho lưới thẻ/ảnh; tiêu đề trang
   dùng chung một kiểu với tiêu đề bài để nhất quán giữa các trang con.
   -------------------------------------------------------------------------- */

.tc-trang--rong {
  max-width: 72rem;
}

.tc-ds__tieu-de {
  margin-bottom: var(--space-5);
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
}

/* --------------------------------------------------------------------------
   /cong-nghe — lưới thẻ công nghệ (thẻ lặp: _mau/the/cong-nghe.html)
   -------------------------------------------------------------------------- */

.tc-cong-nghe__luoi {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.tc-cong-nghe {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-gold-light);
}

.tc-cong-nghe__anh {
  margin: 0;
  background: var(--color-surface);
}

.tc-cong-nghe__anh img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 450;
  object-fit: cover;
}

.tc-cong-nghe__ten {
  margin: 0;
  padding: var(--space-3) var(--space-3) var(--space-1);
  font-size: 1.1rem;
}

/* T232: tên công nghệ là liên kết → vàng nâu */
.tc-cong-nghe__lien-ket {
  color: var(--color-vang-nau);
  text-decoration: none;
}

.tc-cong-nghe__lien-ket:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tc-cong-nghe__mo-ta {
  margin: 0;
  padding: 0 var(--space-3) var(--space-3);
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   /bang-gia — lưới ảnh bảng giá, mỗi ảnh là 1 nút mở ảnh lớn
   (hộp thoại #hop-anh-lon dùng chung, hành vi [data-anh-lon] trong main.js).
   Viết theo cấu trúc thẻ figure > button > img để không phụ thuộc tên lớp
   của thẻ dùng chung.
   -------------------------------------------------------------------------- */

.tc-bang-gia__luoi {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 20rem));
}

.tc-bang-gia__luoi figure {
  margin: 0;
}

.tc-bang-gia__luoi button {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 1px solid var(--color-gold-light);
  cursor: zoom-in;
}

.tc-bang-gia__luoi button:hover {
  border-color: var(--color-gold);
}

.tc-bang-gia__luoi img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--color-surface);
}

/* --------------------------------------------------------------------------
   /kien-thuc và /bai-viet/<slug> (T115)
   /kien-thuc dùng lại nguyên lưới .bai-viet__luoi + thẻ .the-bai-viet của
   style.css (thẻ lặp: _mau/the/bai-viet.html) nên không cần lớp riêng.
   Dưới đây là phần riêng của trang bài: ngày, ảnh, mục lục, bài liên quan.
   -------------------------------------------------------------------------- */

/* Ngày đăng ngay dưới H1: chữ nhỏ, màu phụ, cùng kiểu với ngày trên thẻ bài */
.tc-bai__ngay {
  margin: calc(var(--space-3) * -1) 0 var(--space-4);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Ảnh đại diện: giữ tỉ lệ 600x400 khai báo trong khuôn, không tràn khung */
.tc-bai__anh {
  margin: 0 0 var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-gold-light);
}

.tc-bai__anh img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mục lục: khối nền xám lạnh nhẹ phía trên nội dung, danh sách có số thứ tự */
.tc-muc-luc {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-gold-light);
}

/* T232: nhãn mục lục là tiêu đề nhỏ → nâu ấm (không dùng vàng nhạt vì thiếu tương phản) */
.tc-muc-luc__nhan {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-nau);
}

.tc-muc-luc__ds {
  margin: 0;
  padding-left: var(--space-5);
}

.tc-muc-luc__muc + .tc-muc-luc__muc {
  margin-top: var(--space-1);
}

/* T232: liên kết mục lục nằm trên nền kem → vàng nâu đậm để giữ tương phản AA */
.tc-muc-luc__lien-ket {
  color: var(--color-vang-nau-dam);
  text-underline-offset: 2px;
}

/* Bài liên quan: ngăn cách bằng đường kẻ gold mảnh, lưới thẻ dùng chung */
.tc-lien-quan {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-gold-light);
}

.tc-lien-quan__tieu-de {
  margin-bottom: var(--space-4);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
}

/* --------------------------------------------------------------------------
   Hỏi–đáp trong bài (details/summary): đảm bảo nội dung ẩn khi details chưa
   mở, hiện khi mở. Một số trình duyệt headless/công cụ kiểm chứng coi phần
   tử con của details đóng là visible nếu không có display:none rõ ràng.
   -------------------------------------------------------------------------- */

.tc-bai__noi-dung details:not([open]) > :not(summary) {
  display: none;
}

.tc-bai__noi-dung details[open] > :not(summary) {
  display: block;
}

/* --------------------------------------------------------------------------
   /lien-he — khối thông tin liên hệ (địa chỉ, hotline, Zalo, giờ mở cửa)
   Dữ liệu lấy từ site/content/cai-dat.md qua build, không gõ cứng trong HTML.
   Nút "Chỉ đường"/"Nhắn Zalo" dùng .btn của style.css.
   -------------------------------------------------------------------------- */

.tc-lien-he {
  margin: 0 0 var(--space-6);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-gold-light);
}

.tc-lien-he__tieu-de {
  margin-bottom: var(--space-3);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
}

/* Mỗi dòng là 1 cặp nhãn–giá trị; hẹp thì xếp dọc, đủ chỗ thì 2 cột */
.tc-lien-he__ds {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.tc-lien-he__muc {
  min-width: 0;
}

.tc-lien-he__nhan {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.tc-lien-he__gia-tri {
  margin: 0;
  color: var(--color-navy);
}

.tc-lien-he__hanh-dong {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}

/* T246: form đăng ký tư vấn đặt ngay dưới H1 ở /lien-he (yêu cầu người dùng 2026-11-13),
   trước khối "Thông tin liên hệ". Khối bọc giữ khoảng cách:
   - trên: H1 đã có margin-bottom 24px (var(--space-5)) → form cách H1 ~24px;
   - dưới: 32px + 8px token = ~40px tới khối thông tin liên hệ.
   Bỏ padding dọc của khu vực và padding ngang của khung lồng để form rộng tối đa
   bằng bề rộng nội dung, không tràn trên mobile (ô nhập đã width: 100%). */
.tc-lien-he__dang-ky {
  margin: 0 0 calc(var(--space-6) + var(--space-2));
}

.tc-lien-he__dang-ky .dang-ky {
  padding-block: 0;
  /* Nút nổi "Đặt lịch" trỏ tới #dang-ky: chừa chiều cao header dính để tiêu đề form
     không bị che khi cuộn tới (không ảnh hưởng bố cục). */
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.tc-lien-he__dang-ky .khung {
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   /tim-kiem — ô tìm lại + danh sách kết quả (trang-con.js dựng từ tim-kiem.json)
   -------------------------------------------------------------------------- */

.tc-tim-kiem__form {
  margin: 0 0 var(--space-5);
}

.tc-tim-kiem__nhan {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 600;
  color: var(--color-navy);
}

.tc-tim-kiem__hang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Dùng lại .truong__o cho kiểu ô nhập; ở đây chỉ giãn cho vừa hàng */
.tc-tim-kiem__o {
  flex: 1 1 14rem;
  min-width: 0;
}

.tc-tim-kiem__ket-qua {
  margin-top: var(--space-5);
}

.tc-tim-kiem__tieu-de-muc {
  margin-bottom: var(--space-3);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
}

.tc-tim-kiem__trang-thai {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
}

.tc-tim-kiem__ds {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ngăn cách các kết quả bằng đường kẻ gold mảnh, không cần khối nền */
.tc-tim-kiem__muc {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-gold-light);
}

.tc-tim-kiem__muc:first-child {
  padding-top: 0;
  border-top: 0;
}

.tc-tim-kiem__tieu-de {
  margin: 0 0 var(--space-1);
  font-size: 1.1rem;
}

/* T232: kết quả tìm kiếm là liên kết → vàng nâu */
.tc-tim-kiem__lien-ket {
  color: var(--color-vang-nau);
  text-underline-offset: 2px;
}

.tc-tim-kiem__mo-ta {
  margin: 0;
  color: var(--color-text-muted);
}

/* Đủ chỗ: thông tin liên hệ thành 2 cột cho gọn, dễ quét mắt */
@media (min-width: 768px) {
  .tc-lien-he__ds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   /ket-qua — tab theo nhóm kết quả (T217)
   Dùng lại nguyên khối tab + thẻ ảnh của trang chủ (.tab, .tab__ds, .tab__nut,
   .tab__panel, .ket-qua__dai, .ket-qua__anh; khuôn the/ket-qua-tab.html +
   the/ket-qua-panel.html) và JS khoiTaoTab của main.js.
   Chỉ khác trang chủ: dải ảnh .ket-qua__dai đổi từ cuộn ngang thành LƯỚI
   xuống dòng để thấy nhiều ảnh cùng lúc — mobile 1 cột, tablet 2, desktop 3.
   -------------------------------------------------------------------------- */

.tc-ket-qua-tab .ket-qua__dai {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  /* Bỏ cuộn ngang/scroll-snap của dải ảnh trang chủ: ảnh tự xuống dòng */
  overflow-x: visible;
  padding-bottom: 0;
  scroll-snap-type: none;
}

/* Ảnh trong lưới: bỏ flex-basis của dải cuộn ngang, giữ ảnh vuông bo góc */
.tc-ket-qua-tab .ket-qua__dai .ket-qua__anh {
  flex: none;
  scroll-snap-align: none;
  overflow: hidden;
  border-radius: var(--radius);
}

/* Tablet (≥ 768px): 2 cột — khớp ngưỡng tablet dùng chung trong style.css */
@media (min-width: 768px) {
  .tc-ket-qua-tab .ket-qua__dai {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop (≥ 1024px): 3 cột */
@media (min-width: 1024px) {
  .tc-ket-qua-tab .ket-qua__dai {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}