/*
 * Dải khách (phác thảo chủ duyệt 29/10/2026, modules/ngay-tot/ke-hoach/phac-thao-dai-khach-2026-10-29/).
 *
 * Khách chưa đăng nhập dùng thẳng công cụ (không tường ⇒ không dải đầu chung): máy chủ in một dải mỏng ĐÚNG chỗ thanh
 * «Bạn đang xem với tư cách khách…» (FengShui_Seo_Cong_Cu::dai_khach_html) và một hàng liên kết sau khung
 * (dai_khach_chan_html). Cả hai mang lớp k-khung + data-bang / data-nen để đọc token --k-* của khung (khung.css trong CSS
 * công cụ nạp trước tệp này) — KHÔNG có mã màu riêng ở đây. Không đổi gì bên trong ô gắn React, trừ chiều cao khung máy
 * tính (vừa phần màn hình còn lại dưới dải).
 *
 * Chiều cao cố định (54 px máy tính; điện thoại giữ chỗ đúng hai dòng tên + hai dòng mô tả) để công cụ bên dưới không xê
 * dịch khi phông về hay khi gói giao diện chạy.
 */

/* Vỏ dùng lại .fengshui-scope để nhận phông / biến của hub-theme — gỡ nền và chiều cao 100vh mà vỏ ấy tự mang. */
.fengshui-scope.fs-dk-vo { width: 100%; min-height: 0 !important; background: none !important; background-image: none !important; }

.fengshui-scope .k-khung.fs-dk,
.fengshui-scope .k-khung.fs-dk-chan {
  height: auto; min-height: 0; overflow: visible; grid-template-rows: none;
  background: linear-gradient(var(--k-kinh), var(--k-kinh)), linear-gradient(160deg, var(--k-nen), var(--k-nen-2));
}

/* ── Dải ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
.fengshui-scope .k-khung.fs-dk {
  /* hub-theme ép màu mọi tiêu đề qua --accent-text (!important) ⇒ khai ở khối cha, đừng tăng độ đặc hiệu. */
  --accent-text: var(--k-chu);
  height: 54px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center;
  padding: 0 var(--k-khe); border-bottom: 1px solid var(--k-vien);
}
.fs-dk .fs-dk-chu { min-width: 0; }
.fs-dk .fs-dk-tieu {
  margin: 0; font: 600 20px/1.15 var(--k-f-tieu); letter-spacing: 0; color: var(--k-chu); text-shadow: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fs-dk .fs-dk-mo {
  margin: 3px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--k-chu-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fs-dk .fs-dk-nut { display: flex; gap: 8px; }
.fs-dk .fs-dk-nut a { width: auto; height: 32px; padding: 0 14px; font-size: 13px; border-radius: var(--k-r-nho); text-decoration: none; }

/*
 * Máy tính: khung công cụ cao đúng phần màn hình còn lại (trước đây thanh vàng đẩy khung 100dvh tràn 55 px khỏi màn). Ô
 * gắn giữ sẵn đúng chiều cao ấy TRƯỚC khi gói giao diện chạy — không thì hàng liên kết hiện ngay dưới dải rồi bị đẩy
 * xuống (đo 29/10: CLS 0,032 chỉ từ hàng ấy).
 */
@media (min-width: 1024px) {
  .fs-dk-vo ~ .fs-module-wrap { min-height: 0 !important; }
  .fs-dk-vo ~ .fs-module-wrap > .fengshui-scope { min-height: calc(100vh - 54px) !important; min-height: calc(100dvh - 54px) !important; }
  .fs-dk-vo ~ .fs-module-wrap > .fengshui-scope > .k-khung { height: calc(100vh - 54px); height: calc(100dvh - 54px); }
}

@media (max-width: 1279px) {
  .fs-dk .fs-dk-mien { display: none; }
}

@media (max-width: 1023px) {
  .fengshui-scope .k-khung.fs-dk {
    height: auto; grid-template-areas: "tieu nut" "mo mo"; gap: 4px 10px; padding: 8px 12px;
  }
  .fs-dk .fs-dk-chu { display: contents; }
  .fs-dk .fs-dk-tieu {
    grid-area: tieu; font-size: 18px; line-height: 1.2; height: 2.4em; white-space: normal; text-wrap: balance;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .fs-dk .fs-dk-mo {
    grid-area: mo; margin: 0; font-size: 12px; line-height: 1.4; height: 2.8em; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .fs-dk .fs-dk-nut { grid-area: nut; align-self: center; }
}

@media (max-width: 359px) {
  .fs-dk .fs-dk-tieu { font-size: 16px; }
  .fs-dk .fs-dk-nut a { padding: 0 10px; }
}

/* ── Hàng liên kết sau khung ────────────────────────────────────────────────────────────────────────────────── */
.fengshui-scope .k-khung.fs-dk-chan {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px;
  padding: 14px var(--k-khe); border-top: 1px solid var(--k-vien);
}
.fs-dk-chan .k-dd-duong { grid-column: auto; }

/* In (tờ A4 của công cụ): dải và hàng liên kết nằm ngoài khung nên luật ẩn của tờ in không với tới. */
@media print {
  .fs-dk-vo { display: none !important; }
}

@media (max-width: 1023px) {
  /* Đáy chừa chỗ thanh «‹ Xem hôm nay ›» cố định ở đáy màn điện thoại. */
  .fengshui-scope .k-khung.fs-dk-chan {
    flex-direction: column; align-items: flex-start; padding: 16px 12px calc(84px + env(safe-area-inset-bottom, 0px));
  }
}