/* ==========================================================================
   Kinh Dịch Thiên Minh — giao diện
   Bảng màu lấy từ vật liệu: nhựa trầm, khói nhang, giấy dó, sơn ta, vàng son.
   Vàng chỉ dùng làm nét mảnh và dấu nhỏ, không bao giờ tô nền, không gradient.
   ========================================================================== */

:root {
  --kdtm-giay:      #F2F0EA;   /* nền chính */
  --kdtm-nen:       #E6E2D9;   /* khối, ảnh chờ */
  --kdtm-vien:      #D3CCC0;
  --kdtm-vien-dam:  #B9B0A0;
  --kdtm-tram:      #241C14;   /* chữ tiêu đề, nút chính */
  --kdtm-muc:       #3B3126;   /* chữ nội dung */
  --kdtm-khoi:      #6B6357;   /* chữ phụ */
  --kdtm-son:       #8E2A1C;   /* nhấn, khuyến mãi, nút liên hệ */
  --kdtm-kim:       #A8863F;   /* nét mảnh, hào */
  --kdtm-sang:      #FBF8F3;   /* chữ trên nền đậm */

  --kdtm-chu-nd:    "Lora", Georgia, "Times New Roman", serif;
  --kdtm-chu-gd:    "Be Vietnam Pro", system-ui, "Segoe UI", sans-serif;

  --kdtm-rong:      1200px;
  --kdtm-nhip:      clamp(48px, 7vw, 88px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kdtm-giay: #16120F; --kdtm-nen: #201A15; --kdtm-vien: #342C24;
    --kdtm-vien-dam: #4E4237; --kdtm-tram: #EBE4D8; --kdtm-muc: #D6CDBF;
    --kdtm-khoi: #9A9083; --kdtm-son: #CB5B43; --kdtm-kim: #C7A55D;
    --kdtm-sang: #16120F;
  }
}

/* --------------------------------------------------------------------------
   NỐI BẢNG MÀU VÀO THEME MẸ BLOCKSY — phần này KHÔNG nằm ở đây.

   Blocksy vẽ phần đầu trang, chân trang, liên kết và nút bằng bộ biến riêng
   --theme-*, và nó in bộ biến đó bằng thẻ <style> ngay trong trang. Thẻ <style>
   đó đứng SAU tệp này, nên viết đè ở đây sẽ thua.

   Vì vậy phần gán --theme-* nằm trong functions.php, in ra ở cuối phần đầu
   trang (wp_head ưu tiên 99) để chắc chắn thắng. Xem hàm kdtm_noi_mau_blocksy().
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Nền tảng chữ. Tiếng Việt cần giãn dòng rộng hơn vì dấu chồng lên nhau.
   -------------------------------------------------------------------------- */

/* Ẩn là phải ẩn hẳn: hộp xem ảnh đặt display:grid nên phải có dòng này,
   không thì nó hiện đè lên trang ngay khi tải. */
[hidden] { display: none !important; }

html,
body {
  background: var(--kdtm-giay);
  color: var(--kdtm-muc);
  font-family: var(--kdtm-chu-nd);
  font-size: 17px;
  line-height: 1.75;
}

h1, h2, h3, h4, .kdtm-tieu {
  font-family: var(--kdtm-chu-nd);
  color: var(--kdtm-tram);
  font-weight: 500;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* Nội dung dài giới hạn 66 ký tự một dòng — đọc không mỏi mắt. */
.entry-content p,
.kdtm-ve-thay__chu p,
.kdtm-goi-chi-tiet__mo-ta p {
  max-width: 66ch;
}

.kdtm-nhan {
  font-family: var(--kdtm-chu-gd);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kdtm-khoi);
}

/* --------------------------------------------------------------------------
   Hào — vạch liền là dương, vạch đứt là âm. Dấu nhận biết riêng của thương hiệu.
   -------------------------------------------------------------------------- */

.kdtm-hao {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 34px;
}
.kdtm-hao i {
  display: block;
  height: 3px;
  background: var(--kdtm-kim);
}
.kdtm-hao i.am {
  background: linear-gradient(to right,
    var(--kdtm-kim) 0 41%, transparent 41% 59%, var(--kdtm-kim) 59% 100%);
}

/* Đường ngăn giữa các phần cũng là một hào âm. */
.kdtm-chia {
  border: 0;
  height: 1px;
  background: linear-gradient(to right,
    var(--kdtm-vien) 0 46%, transparent 46% 54%, var(--kdtm-vien) 54% 100%);
  margin: var(--kdtm-nhip) 0;
}

/* --------------------------------------------------------------------------
   Nút
   -------------------------------------------------------------------------- */

.kdtm-nut {
  display: inline-block;
  font-family: var(--kdtm-chu-gd);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  padding: 13px 20px;
  border: 1px solid var(--kdtm-tram);
  border-radius: 0;
  background: var(--kdtm-tram);
  color: var(--kdtm-sang);
  text-align: center;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}

.kdtm-nut:hover {
  background: var(--kdtm-muc);
  color: var(--kdtm-sang);
}

.kdtm-nut--vien {
  background: transparent;
  color: var(--kdtm-tram);
}
.kdtm-nut--vien:hover {
  background: var(--kdtm-tram);
  color: var(--kdtm-sang);
}

.kdtm-nut--son {
  background: var(--kdtm-son);
  border-color: var(--kdtm-son);
  color: #FBF7F2;
}
.kdtm-nut--son:hover {
  background: var(--kdtm-tram);
  border-color: var(--kdtm-tram);
}

.kdtm-nut:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--kdtm-kim);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   CỤM NÚT NỔI — Zalo · Messenger · Gọi
   -------------------------------------------------------------------------- */

.kdtm-noi {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kdtm-noi__nut {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--kdtm-tram);
  color: var(--kdtm-sang);
  text-decoration: none;
  font-family: var(--kdtm-chu-gd);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(36, 28, 20, .22);
  position: relative;
  transition: transform .16s ease;
}
.kdtm-noi__nut:hover { transform: translateY(-2px); }
.kdtm-noi__nut svg { display: block; }
.kdtm-noi__nut--zalo { background: #0068FF; color: #fff; }
.kdtm-noi__nut--goi  { background: var(--kdtm-son); color: #fff; }

/* Messenger dùng đúng dải màu của nó — khách nhận ra nút nhờ dải màu này.
   NGOẠI LỆ DUY NHẤT được tô chuyển màu trên toàn site: đây là dấu hiệu của bên
   thứ ba, không phải màu của mình. Bảng màu Kinh Dịch Thiên Minh vẫn không bao
   giờ tô chuyển màu, không bao giờ tô nền vàng kim. */
.kdtm-noi__nut--mess {
  background: linear-gradient(45deg, #00B2FF 0%, #006AFF 38%, #A033FF 70%, #FF5C87 100%);
  color: #fff;
}

/* Nhãn chữ hiện khi rê chuột; trên điện thoại thì ẩn cho gọn. */
.kdtm-noi__nhan {
  position: absolute;
  right: 60px;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 11px;
  background: var(--kdtm-tram);
  color: var(--kdtm-sang);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}
.kdtm-noi__nut:hover .kdtm-noi__nhan { opacity: 1; }

@media (hover: none) {
  .kdtm-noi__nhan { display: none; }
}

/* --------------------------------------------------------------------------
   Điện thoại — cỡ chữ tối thiểu 14px, vùng bấm tối thiểu 44px.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  body { font-size: 16px; }

  .kdtm-nut { min-height: 44px; padding: 12px 16px; }

  .kdtm-noi { right: 12px; bottom: 12px; }
  .kdtm-noi__nut { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   KHUNG — bề rộng nội dung. Ba mức: thường, hẹp (để đọc), và hai cột.
   -------------------------------------------------------------------------- */

.kdtm-khung {
  width: min(100% - 40px, var(--kdtm-rong));
  margin-inline: auto;
}
.kdtm-khung--hep { width: min(100% - 40px, 720px); }

.kdtm-khung--doi {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.kdtm-trang-chu section,
.kdtm-trang-goi .kdtm-muc,
.kdtm-trang-danh-sach section { padding-block: var(--kdtm-nhip); }

/* Dải thông báo trên cùng */
.kdtm-dai-bao {
  background: var(--kdtm-tram);
  color: var(--kdtm-sang);
  font-family: var(--kdtm-chu-gd);
  font-size: 13px;
  text-align: center;
  padding: 9px 16px;
}

/* --------------------------------------------------------------------------
   MỞ ĐẦU — ba giây đầu tiên quyết định khách ở lại hay thoát.
   -------------------------------------------------------------------------- */

.kdtm-mo-dau {
  text-align: center;
  padding-block: clamp(56px, 9vw, 120px) var(--kdtm-nhip);
}
.kdtm-mo-dau--nho { padding-block: clamp(40px, 6vw, 72px) 0; }

.kdtm-mo-dau__khau-hieu {
  font-family: var(--kdtm-chu-gd);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--kdtm-kim);
  margin: 0 0 22px;
}

.kdtm-hao--que { margin: 0 auto 22px; }

.kdtm-mo-dau__ten {
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.16;
  margin: 0 0 20px;
}

.kdtm-mo-dau__cau {
  max-width: 58ch;
  margin: 0 auto;
  color: var(--kdtm-khoi);
  font-size: clamp(16px, 1.6vw, 19px);
}

.kdtm-mo-dau__nut {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
}

/* --------------------------------------------------------------------------
   Tiêu đề mục
   -------------------------------------------------------------------------- */

.kdtm-tieu-de-muc {
  font-size: clamp(24px, 3.2vw, 34px);
  margin: 14px 0 12px;
}

.kdtm-dan-muc {
  color: var(--kdtm-khoi);
  max-width: 62ch;
  margin: 0 0 30px;
}

.kdtm-nhan-muc {
  font-family: var(--kdtm-chu-gd);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kdtm-khoi);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--kdtm-vien);
}

.kdtm-trang-chu .kdtm-hao,
.kdtm-trang-danh-sach .kdtm-hao { margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   VỀ THẦY
   -------------------------------------------------------------------------- */

.kdtm-ve-thay { background: var(--kdtm-nen); }

.kdtm-ve-thay__anh { margin: 0; }
.kdtm-ve-thay__anh img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--kdtm-vien-dam);
}

.kdtm-ve-thay__chu h2 { font-size: clamp(24px, 3vw, 32px); margin: 12px 0 14px; }
.kdtm-ve-thay__chu ul { padding-left: 1.1em; }
.kdtm-ve-thay__chu li { margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   SÁU GÓI — thẻ có giá ngay trên mặt thẻ.
   Khách hỏi giá là câu đầu tiên; giấu giá xuống dưới là mất một nhịp.
   -------------------------------------------------------------------------- */

.kdtm-luoi-goi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
}

.kdtm-goi {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  background: var(--kdtm-giay);
  border: 1px solid var(--kdtm-vien);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.kdtm-goi:hover {
  border-color: var(--kdtm-kim);
  transform: translateY(-2px);
}

.kdtm-goi__hao { display: flex; flex-direction: column; gap: 4px; width: 28px; margin-bottom: 16px; }
.kdtm-goi__hao i { display: block; height: 3px; background: var(--kdtm-kim); }
.kdtm-goi__hao i.am {
  background: linear-gradient(to right,
    var(--kdtm-kim) 0 41%, transparent 41% 59%, var(--kdtm-kim) 59% 100%);
}

.kdtm-goi__ten { font-size: 20px; margin: 0 0 8px; line-height: 1.34; }

.kdtm-goi__hinh-thuc {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--kdtm-chu-gd);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kdtm-khoi);
  border: 1px solid var(--kdtm-vien-dam);
  padding: 3px 8px;
  margin-bottom: 14px;
}

.kdtm-goi__tom-tat {
  color: var(--kdtm-khoi);
  font-size: 15.5px;
  line-height: 1.68;
  margin: 0 0 20px;
  flex: 1;
}

.kdtm-goi__chan {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--kdtm-vien);
}

.kdtm-goi__gia {
  font-family: var(--kdtm-chu-gd);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--kdtm-tram);
}

.kdtm-goi__xem {
  font-family: var(--kdtm-chu-gd);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--kdtm-son);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   TRANG MỘT GÓI
   -------------------------------------------------------------------------- */

.kdtm-goi-chi-tiet__dau {
  text-align: center;
  padding-block: clamp(40px, 6vw, 76px) 0;
}

.kdtm-goi-chi-tiet__duong-dan {
  font-family: var(--kdtm-chu-gd);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 22px;
}
.kdtm-goi-chi-tiet__duong-dan a { color: var(--kdtm-khoi); text-decoration: none; }
.kdtm-goi-chi-tiet__duong-dan a:hover { color: var(--kdtm-son); }

.kdtm-goi-chi-tiet__ten {
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.2;
  margin: 0 0 14px;
}

.kdtm-goi-chi-tiet__hinh-thuc {
  display: inline-block;
  font-family: var(--kdtm-chu-gd);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kdtm-khoi);
  border: 1px solid var(--kdtm-vien-dam);
  padding: 4px 12px;
  margin: 0;
}

.kdtm-vi-du {
  margin-top: 22px;
  padding: 18px 22px;
  background: var(--kdtm-nen);
  border-left: 2px solid var(--kdtm-kim);
}
.kdtm-vi-du__nhan {
  font-family: var(--kdtm-chu-gd);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kdtm-khoi);
  margin: 0 0 8px;
}
.kdtm-vi-du__ds { margin: 0; padding-left: 1.1em; }
.kdtm-vi-du__ds li { font-style: italic; margin-bottom: 6px; }

.kdtm-quyen-loi { margin: 0; padding: 0; list-style: none; }
.kdtm-quyen-loi li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
}
.kdtm-quyen-loi li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 18px;
  height: 2px;
  background: var(--kdtm-kim);
}

/* Khối chốt: giá và nút Zalo, đứng riêng để không lẫn vào chữ */
.kdtm-chot {
  text-align: center;
  padding: 34px 24px;
  background: var(--kdtm-nen);
  border: 1px solid var(--kdtm-vien-dam);
}
.kdtm-chot__nhan {
  display: block;
  font-family: var(--kdtm-chu-gd);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kdtm-khoi);
  margin-bottom: 8px;
}
.kdtm-chot__so {
  display: block;
  font-family: var(--kdtm-chu-gd);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--kdtm-tram);
  margin-bottom: 22px;
}
.kdtm-chot__ghi-chu {
  font-size: 13.5px;
  color: var(--kdtm-khoi);
  margin: 14px 0 0;
}

.kdtm-goi-khac { background: var(--kdtm-nen); }

/* --------------------------------------------------------------------------
   THU LEAD
   -------------------------------------------------------------------------- */

.kdtm-keu-goi {
  /* Nền giấy: mục phản hồi ngay trên đã dùng nền đậm — xem bảng luân phiên ở trên. */
  text-align: center;
}

.kdtm-lead {
  margin-top: 30px;
  text-align: left;
  padding: 28px 26px;
  background: var(--kdtm-giay);
  border: 1px solid var(--kdtm-vien);
}

.kdtm-lead__tieu-de { font-size: 20px; margin: 0 0 20px; }

.kdtm-lead__o { margin: 0 0 16px; }
.kdtm-lead__o label {
  display: block;
  font-family: var(--kdtm-chu-gd);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--kdtm-muc);
  margin-bottom: 6px;
}
.kdtm-lead__o label span { font-weight: 400; color: var(--kdtm-khoi); }

.kdtm-lead__o input,
.kdtm-lead__o textarea {
  width: 100%;
  font-family: var(--kdtm-chu-gd);
  font-size: 16px;            /* dưới 16px là iPhone tự phóng to trang khi bấm vào ô */
  padding: 12px 14px;
  background: var(--kdtm-giay);
  color: var(--kdtm-muc);
  border: 1px solid var(--kdtm-vien-dam);
  border-radius: 0;
}
.kdtm-lead__o input:focus,
.kdtm-lead__o textarea:focus {
  outline: 2px solid var(--kdtm-kim);
  outline-offset: 1px;
}

/* Ô bẫy máy gửi rác — người thật không bao giờ nhìn thấy. */
.kdtm-lead__bay {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kdtm-lead__form button { width: 100%; }

.kdtm-lead__cam-ket {
  font-size: 12.5px;
  color: var(--kdtm-khoi);
  margin: 14px 0 0;
}

.kdtm-lead__xong { text-align: center; }
.kdtm-lead__xong h3 { font-size: 21px; margin: 0 0 10px; }
.kdtm-lead__xong p { color: var(--kdtm-khoi); margin: 0 0 20px; }
.kdtm-lead__hao {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 30px;
  margin: 0 auto 16px;
}
.kdtm-lead__hao i { display: block; height: 3px; background: var(--kdtm-kim); }

/* --------------------------------------------------------------------------
   NÚT — hai dạng dùng trên toàn site
   -------------------------------------------------------------------------- */

.kdtm-nut--chinh {
  background: var(--kdtm-tram);
  border-color: var(--kdtm-tram);
  color: var(--kdtm-sang);
}

.kdtm-nut--zalo {
  background: #0068FF;
  border-color: #0068FF;
  color: #fff;
}
.kdtm-nut--zalo:hover {
  background: #0055D4;
  border-color: #0055D4;
  color: #fff;
}

/* --------------------------------------------------------------------------
   CHÂN TRANG — thông tin pháp nhân.
   Đây là phần chứng minh doanh nghiệp có thật; đừng làm nó mờ quá mức đọc được.
   -------------------------------------------------------------------------- */

.kdtm-phap-nhan {
  border-top: 1px solid var(--kdtm-vien);
  padding-block: 30px;
  font-family: var(--kdtm-chu-gd);
  font-size: 13.5px;
  color: var(--kdtm-khoi);
  text-align: center;
}
.kdtm-phap-nhan p { margin: 0 0 5px; }
.kdtm-phap-nhan__ten {
  font-weight: 600;
  color: var(--kdtm-muc);
  letter-spacing: 0.02em;
}
.kdtm-phap-nhan__lien-he { margin-top: 10px; }
.kdtm-phap-nhan a { color: var(--kdtm-son); text-decoration: none; }
.kdtm-phap-nhan a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Điện thoại — phần lớn khách đến từ Facebook và Zalo, tức là từ điện thoại.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .kdtm-khung--doi { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .kdtm-khung { width: calc(100% - 32px); }
  .kdtm-khung--hep { width: calc(100% - 32px); }

  .kdtm-luoi-goi { grid-template-columns: 1fr; }
  .kdtm-phan-hoi { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .kdtm-mo-dau__nut { flex-direction: column; }
  .kdtm-mo-dau__nut .kdtm-nut { width: 100%; }

  .kdtm-lead { padding: 22px 18px; }
  .kdtm-chot { padding: 26px 18px; }
}

/* --------------------------------------------------------------------------
   PHẢN HỒI KHÁCH — bằng chứng, không phải trang trí.

   Khung do CSS vẽ, KHÔNG nung vào ảnh. Người quản trị tải lên một ảnh chụp
   tin nhắn trần; nền giấy, nét viền, quẻ và dòng tên miền do đây thêm vào.
   Nhờ vậy ảnh thứ 50 trông giống ảnh thứ 1 mà không ai phải mở phần mềm đồ hoạ.

   Ô ảnh ép về hình vuông và dùng object-fit: contain, nên ảnh dọc hay ngang thì
   lưới vẫn thẳng hàng, không so le.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   NỀN CÁC MỤC TRANG CHỦ — luân phiên giấy / nền

   Vì sao cần: mục sáu gói và mục phản hồi trước đây cùng nằm trên nền giấy,
   không có gì ngăn giữa, nên đọc liền thành một khối — người xem tưởng ảnh
   phản hồi vẫn còn thuộc phần dịch vụ. Luân phiên nền là cách tách rẻ nhất,
   không phải thêm nét vẽ hay đường kẻ nào:

     mở đầu    giấy
     về thầy   nền
     sáu gói   giấy
     phản hồi  nền      ← đặt ở bản này
     đặt lịch  giấy     ← đổi ở bản này, trước là nền
   -------------------------------------------------------------------------- */

.kdtm-muc-phan-hoi { background: var(--kdtm-nen); }

/* Liên kết sang danh sách đầy đủ, đặt dưới lưới gói ở trang chủ. */
.kdtm-xem-het {
  margin: 34px 0 0;
  text-align: center;
}

.kdtm-lien-ket-manh {
  font-family: var(--kdtm-chu-gd);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--kdtm-tram);
  text-decoration: none;
  border-bottom: 1px solid var(--kdtm-kim);
  padding-bottom: 3px;
}
.kdtm-lien-ket-manh:hover,
.kdtm-lien-ket-manh:focus-visible {
  color: var(--kdtm-son);
  border-bottom-color: var(--kdtm-son);
}

.kdtm-phan-hoi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 16px;
}

.kdtm-ph {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 17px 17px 13px;
  background: var(--kdtm-giay);
  border: 1px solid var(--kdtm-vien);
}

.kdtm-ph__dau { display: flex; align-items: center; gap: 10px; }

.kdtm-ph__hao { width: 22px; gap: 3px; }
.kdtm-ph__hao i { height: 2px; }

.kdtm-ph__nhan {
  font-family: var(--kdtm-chu-gd);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kdtm-khoi);
  line-height: 1.4;
}

.kdtm-ph__anh {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  background: var(--kdtm-giay);
  border: 1px solid var(--kdtm-vien-dam);
  border-radius: 0;
  cursor: zoom-in;
}
.kdtm-ph__anh img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.kdtm-ph__chan {
  font-family: var(--kdtm-chu-gd);
  font-size: 10.5px;
  color: var(--kdtm-khoi);
  text-align: right;
}

.kdtm-ph-them-vo { text-align: center; margin: 26px 0 0; }

.kdtm-phan-hoi__ghi-chu {
  font-size: 13px;
  color: var(--kdtm-khoi);
  margin-top: 18px;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Hộp xem ảnh cỡ lớn — chữ trong ảnh mới là phần đáng đọc.
   -------------------------------------------------------------------------- */

.kdtm-xem-anh {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(36, 28, 20, .62);
  display: grid;
  place-items: center;
  padding: 24px;
  cursor: zoom-out;
}
.kdtm-xem-anh img {
  max-width: min(100%, 760px);
  max-height: 88vh;
  width: auto;
  height: auto;
  display: block;
  background: var(--kdtm-giay);
  border: 1px solid var(--kdtm-vien-dam);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .34);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kdtm-xem-anh { background: rgba(0, 0, 0, .72); }
}
:root[data-theme="dark"] .kdtm-xem-anh { background: rgba(0, 0, 0, .72); }

@media (max-width: 640px) {
  .kdtm-phan-hoi { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kdtm-ph { padding: 11px 11px 9px; gap: 8px; }
  .kdtm-ph__nhan { font-size: 8.5px; letter-spacing: .12em; }
  .kdtm-ph__chan { font-size: 9px; }
}

/* --------------------------------------------------------------------------
   TRANG THƯỜNG — mọi trang người quản trị tự tạo trong WordPress.

   Phần này quan trọng hơn nó nhìn: nhờ có nó, người quản trị tạo bao nhiêu
   trang mới cũng được (Liên hệ, Câu hỏi thường gặp, Chính sách…) mà trang nào
   cũng đúng tông, KHÔNG cần ai viết thêm mã.

   Nên phải lo cả những thẻ mà người ta gõ tự do trong trình soạn thảo:
   tiêu đề, danh sách, trích dẫn, bảng, ảnh, mã.
   -------------------------------------------------------------------------- */

.kdtm-bai { padding-block: clamp(30px, 4vw, 52px) var(--kdtm-nhip); }

.kdtm-bai__anh { margin: 0 0 32px; }
.kdtm-bai__anh img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--kdtm-vien-dam);
}

.kdtm-bai__noi-dung { font-size: 17px; }

/* Chiều rộng đọc: 66 ký tự một dòng. Dài hơn là mắt phải nhảy dòng khó. */
.kdtm-bai__noi-dung > p,
.kdtm-bai__noi-dung > ul,
.kdtm-bai__noi-dung > ol { max-width: 66ch; }

.kdtm-bai__noi-dung > * + * { margin-top: 1.1em; }

.kdtm-bai__noi-dung h2 {
  font-size: clamp(21px, 2.6vw, 27px);
  margin-top: 2em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--kdtm-vien);
}
.kdtm-bai__noi-dung h3 {
  font-size: clamp(18px, 2.1vw, 21px);
  margin-top: 1.7em;
}

.kdtm-bai__noi-dung ul,
.kdtm-bai__noi-dung ol { padding-left: 1.2em; }
.kdtm-bai__noi-dung li { margin-bottom: .5em; }

.kdtm-bai__noi-dung a { color: var(--kdtm-son); text-underline-offset: 3px; }
.kdtm-bai__noi-dung a:hover { color: var(--kdtm-tram); }

.kdtm-bai__noi-dung strong { color: var(--kdtm-tram); font-weight: 600; }

.kdtm-bai__noi-dung blockquote {
  margin: 1.6em 0;
  padding: 16px 22px;
  background: var(--kdtm-nen);
  border-left: 2px solid var(--kdtm-kim);
  font-style: italic;
}
.kdtm-bai__noi-dung blockquote p { margin: 0; }

.kdtm-bai__noi-dung img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--kdtm-vien);
}

.kdtm-bai__noi-dung hr {
  border: 0;
  height: 1px;
  margin: var(--kdtm-nhip) 0;
  background: linear-gradient(to right,
    var(--kdtm-vien) 0 46%, transparent 46% 54%, var(--kdtm-vien) 54% 100%);
}

/* Bảng người ta dán vào có thể rộng hơn khung — cho nó tự trượt ngang,
   thân trang không bao giờ trượt theo. */
.kdtm-bai__noi-dung table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  display: block;
  overflow-x: auto;
}
.kdtm-bai__noi-dung th,
.kdtm-bai__noi-dung td {
  text-align: left;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--kdtm-vien);
}
.kdtm-bai__noi-dung th {
  font-family: var(--kdtm-chu-gd);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kdtm-khoi);
}

.kdtm-bai__noi-dung code {
  font-size: .92em;
  padding: 2px 5px;
  background: var(--kdtm-nen);
  border: 1px solid var(--kdtm-vien);
}
.kdtm-bai__noi-dung pre {
  padding: 16px;
  background: var(--kdtm-nen);
  border: 1px solid var(--kdtm-vien);
  overflow-x: auto;
}
.kdtm-bai__noi-dung pre code { background: none; border: 0; padding: 0; }

/* Shortcode dán vào giữa nội dung: cho nó đứng riêng, đừng bám sát chữ. */
.kdtm-bai__noi-dung .kdtm-luoi-goi,
.kdtm-bai__noi-dung .kdtm-phan-hoi,
.kdtm-bai__noi-dung .kdtm-lead { margin-top: 1.8em; }

.kdtm-bai__noi-dung .kdtm-nut { margin-top: .4em; }