/* ==========================================================================
   content.css — Nội dung bài viết / trang tĩnh (single, page, archive)
   ========================================================================== */

.entry-header {
  margin-bottom: 20px;
}
.entry-title {
  font-size: clamp(26px, 2.36vw, 34px);
  font-weight: 800;
  line-height: 1.22;
  color: var(--c-green-800);
}
.entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 12px;
  font-size: var(--fs-meta);
  color: var(--c-muted);
}
.entry-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.entry-meta .icon {
  font-size: 15px;
  color: var(--c-green-700);
}

.entry-thumbnail {
  margin-bottom: 24px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.entry-thumbnail img {
  width: 100%;
  height: auto;
}
.entry-thumbnail figcaption {
  padding: 10px 4px 0;
  font-size: var(--fs-meta);
  color: var(--c-muted);
  text-align: center;
}

/* --------------------------------------------------- Khối nội dung bài viết
   Cột đọc hẹp hơn container toàn cục để dòng chữ không quá dài.
   -------------------------------------------------------------------------- */
.entry-content {
  max-width: 820px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--c-body);
}
.entry-content > * + * {
  margin-top: 1.05em;
}
.entry-content h2 {
  margin-top: 1.6em;
  font-size: clamp(20px, 1.6vw, 23px);
  font-weight: 700;
  color: var(--c-green-800);
  line-height: 1.3;
}
.entry-content h3 {
  margin-top: 1.4em;
  font-size: 19px;
  font-weight: 700;
  color: var(--c-green-800);
}
.entry-content h4 {
  margin-top: 1.3em;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-ink);
}
.entry-content a {
  color: var(--c-green-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.entry-content ul,
.entry-content ol {
  padding-inline-start: 22px;
}
.entry-content ul {
  list-style: none;
  padding-inline-start: 0;
}
.entry-content ul > li {
  position: relative;
  padding-inline-start: 22px;
}
.entry-content ul > li + li,
.entry-content ol > li + li {
  margin-top: 8px;
}
.entry-content ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-leaf);
}
/*
 * Ảnh trong bài dùng chung một bề ngang.
 *
 * Ảnh lấy từ website cũ rộng từ 200 đến 2.500 điểm nên nếu để nguyên thì mỗi
 * ảnh một cỡ, đọc rất rối mắt. Ở đây ép tất cả về cùng một khung và căn giữa.
 * Thẻ ảnh đã mang sẵn srcset nên trình duyệt vẫn tải đúng bản vừa đủ, không
 * phải tải ảnh 2.500 điểm về để hiển thị ở 680.
 */
.entry-content img,
.ams-content img {
  display: block;
  width: auto;
  max-width: min(100%, var(--anh-bai-rong, 680px));
  /*
   * Giới hạn cả chiều cao, nếu không thì một tấm ảnh dọc 1920x2560 sẽ cao gần
   * 900 điểm và đẩy toàn bộ phần chữ phía dưới ra khỏi màn hình.
   */
  max-height: var(--anh-bai-cao, 620px);
  height: auto;
  margin: 28px auto;
  border-radius: var(--radius-md);
}

/* Ảnh nằm trong danh sách hoặc bảng thì thu nhỏ cho vừa ô. */
.entry-content li img,
.entry-content td img,
.ams-content li img,
.ams-content td img {
  max-width: min(100%, 420px);
}

.entry-content img + img,
.ams-content img + img {
  margin-top: 20px;
}

/*
 * Khối đặt hàng cuối bài: gom lại thông tin liên hệ vốn nằm rải rác trong nội
 * dung cũ, và cho hai nút bấm đủ lớn để bấm được bằng ngón tay.
 */
.khoi-lien-he {
  margin-top: 36px;
  padding: 24px 24px 20px;
  background: var(--c-surface-green);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}

.khoi-lien-he h2 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: var(--fs-h3);
  color: var(--c-green-900);
}

.khoi-lien-he > p {
  margin-bottom: 16px;
  color: var(--c-body);
}

.khoi-lien-he__nut {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.khoi-lien-he__tt {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-body-sm);
  color: var(--c-body);
}

.khoi-lien-he__tt li {
  padding-inline-start: 0;
  margin-bottom: 4px;
}

.khoi-lien-he__tt li::before {
  content: none;
}

/* Nút bấm dùng chung trong nội dung bài. */
.entry-content .nut,
.ams-content .nut {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--fs-body-sm);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.entry-content .nut--goi,
.ams-content .nut--goi {
  background: var(--c-green-700);
  color: var(--c-on-dark);
}

.entry-content .nut--goi:hover,
.entry-content .nut--goi:focus-visible,
.ams-content .nut--goi:hover,
.ams-content .nut--goi:focus-visible {
  background: var(--c-green-900);
  color: var(--c-on-dark);
}

.entry-content .nut--zalo,
.ams-content .nut--zalo {
  background: var(--c-bg);
  color: var(--c-green-800);
  border: 1px solid var(--c-green-600);
}

.entry-content .nut--zalo:hover,
.entry-content .nut--zalo:focus-visible,
.ams-content .nut--zalo:hover,
.ams-content .nut--zalo:focus-visible {
  background: var(--c-surface-green);
  color: var(--c-green-900);
}

/* Số điện thoại lẫn trong câu chữ: nhấn nhẹ, vẫn bấm gọi được. */
.entry-content .so-dien-thoai,
.ams-content .so-dien-thoai {
  font-weight: 700;
  color: var(--c-green-700);
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}

.entry-content .so-dien-thoai:hover,
.entry-content .so-dien-thoai:focus-visible,
.ams-content .so-dien-thoai:hover,
.ams-content .so-dien-thoai:focus-visible {
  color: var(--c-green-900);
  border-bottom-style: solid;
}
.entry-content figure figcaption {
  margin-top: 8px;
  font-size: var(--fs-meta);
  color: var(--c-muted);
  text-align: center;
}
.entry-content blockquote {
  margin-inline: 0;
  padding: 16px 20px;
  background: var(--c-surface-green);
  border-inline-start: 4px solid var(--c-green-600);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--c-green-900);
  font-size: 16px;
}
.entry-content blockquote p:last-child {
  margin-bottom: 0;
}
.entry-content table {
  font-size: 15px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.entry-content th,
.entry-content td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
}
.entry-content thead th {
  background: var(--c-surface-green);
  color: var(--c-green-800);
  font-weight: 700;
}
.entry-content tbody tr:last-child td {
  border-bottom: 0;
}

.table-scroll {
  overflow-x: auto;
}

/* Hộp ghi chú */
.note {
  padding: 16px 18px;
  background: var(--c-surface-cream);
  border: 1px solid var(--c-line-gold);
  border-radius: var(--radius-md);
  font-size: 15px;
}
.note__title {
  font-weight: 700;
  color: var(--c-gold-700);
  margin-bottom: 6px;
}

/* Thẻ tag + chia sẻ */
.entry-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 820px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--c-line);
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag {
  padding: 5px 12px;
  font-size: 13px;
  background: var(--c-surface-green);
  color: var(--c-green-800);
  border-radius: var(--radius-pill);
}
.tag:hover {
  background: var(--c-green-800);
  color: #fff;
}

/* Kết quả tìm kiếm */
.search-hero {
  padding-block: 30px 22px;
  background: var(--c-surface-soft);
  border-bottom: 1px solid var(--c-line);
}
.search-form-lg {
  display: flex;
  gap: 10px;
  max-width: 620px;
  margin-top: 14px;
}
.search-form-lg .input {
  height: 48px;
}

.result-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.result-item {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  transition: box-shadow var(--t-base);
}
.result-item:hover {
  box-shadow: var(--shadow-sm);
}
.result-item__media {
  border-radius: var(--radius-sm);
  aspect-ratio: 16 / 9;
}
.result-item__kind {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-green-800);
  background: var(--c-surface-green);
  border-radius: var(--radius-pill);
}
.result-item__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.35;
}
.result-item__title a:hover {
  color: var(--c-green-700);
}
.result-item__excerpt {
  margin-top: 6px;
  font-size: 15px;
  color: var(--c-body);
}
.result-item mark {
  background: #fdf3cf;
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}

/* Khối liên hệ / CTA cuối trang nội dung */
.inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 28px;
  padding: 20px 24px;
  background: var(--c-surface-green);
  border-radius: var(--radius-lg);
}
.inline-cta__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--c-green-800);
}
.inline-cta__sub {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--c-body);
}

/* ==========================================================================
   Bình luận
   Bản thiết kế không có khối bình luận, nhưng WordPress vẫn cho bật bất cứ lúc
   nào nên phải có kiểu sẵn, tránh khi bật lên thì form hiện ra trần trụi.
   ========================================================================== */

.comments-area {
  max-width: 820px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
}
.comments-area .comment-reply-title,
.comments-area .comments-title {
  font-size: var(--fs-subsection);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--c-green-800);
  margin-bottom: 14px;
}
.comment-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.comment-list .comment-body {
  padding: 16px 18px;
  background: var(--c-surface-soft);
  border-radius: var(--radius-md);
}
.comment-list li + li,
.comment-list .children li {
  margin-top: 12px;
}
.comment-list .children {
  list-style: none;
  margin: 12px 0 0;
  padding-inline-start: 28px;
}
.comment-author .fn {
  font-weight: 700;
  color: var(--c-ink);
  font-style: normal;
}
.comment-metadata {
  font-size: var(--fs-meta);
  color: var(--c-muted);
}
.comment-content {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
}

.comment-form {
  display: grid;
  gap: 14px;
}
.comment-form p {
  margin: 0;
}
.comment-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 11px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--c-ink);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
}
.comment-form textarea {
  min-height: 130px;
  resize: vertical;
}
.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--c-green-600);
  box-shadow: 0 0 0 3px rgba(47, 125, 59, 0.12);
}
.comment-form .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--c-muted);
}
.comment-form .comment-form-cookies-consent label {
  margin: 0;
  font-weight: 400;
}
.comment-form .form-submit {
  margin: 0;
}
.comment-form input[type="submit"] {
  display: inline-flex;
  padding: 12px 26px;
  font-size: var(--fs-btn);
  font-weight: 600;
  color: #fff;
  background-image: var(--grad-gold);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-btn);
  cursor: pointer;
}
.comment-form input[type="submit"]:hover {
  background-image: var(--grad-gold-hover);
}
.comment-notes,
.logged-in-as {
  font-size: 14px;
  color: var(--c-muted);
}
.no-comments {
  font-size: 15px;
  color: var(--c-muted);
}