/* ==========================================================================
   wordpress.css - Các lớp do WordPress / Gutenberg sinh ra.
   --------------------------------------------------------------------------
   Tệp này KHÔNG có trong bản HTML View. Nó chỉ bổ sung phần WordPress tự tạo
   (căn ảnh, chú thích, khối Gutenberg, bình luận, thanh quản trị) cho khớp
   design system. Không sửa giá trị nào của bản View đã duyệt.
   ========================================================================== */

/* ==========================================================================
   Chống tràn ngang với nội dung thật
   --------------------------------------------------------------------------
   Bản HTML View chỉ có nội dung mẫu nên không gặp trường hợp này. Nội dung
   thật do người dùng nhập có thể chứa đường dẫn hoặc từ rất dài không có
   dấu cách - nếu không xử lý sẽ đẩy vỡ bố cục và gây cuộn ngang.
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
p, li, dd, dt, figcaption, blockquote, td, th, cite,
.post-card__title,
.news-list__title,
.news-featured__title,
.video-list__title,
.video-card__title,
.course-card__title,
.search-result__title,
.post-header__title,
.page-hero__title,
.post-nav__tieu-de,
.breadcrumb,
.widget a {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Đường dẫn dán thẳng vào bài viết thường dài và không có chỗ ngắt tự nhiên */
.post-body a,
.page-body a,
.post-body code,
.page-body code {
  overflow-wrap: anywhere;
}

/* Lớp bảo hiểm cuối cùng: không bao giờ có thanh cuộn ngang toàn trang */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ------------------------------------------------ Căn ảnh kiểu cổ điển */
.alignleft {
  float: left;
  margin: 6px 24px 18px 0;
}

.alignright {
  float: right;
  margin: 6px 0 18px 24px;
}

.aligncenter {
  display: block;
  margin-inline: auto;
}

.alignnone {
  margin: 6px 0 18px;
}

.post-body::after,
.page-body::after {
  content: "";
  display: block;
  clear: both;
}

/* Khối rộng và khối tràn viền trong cột đọc */
.post-body .alignwide,
.page-body .alignwide {
  width: min(100%, calc(var(--reading-max) + 180px));
  margin-inline: auto;
  max-width: none;
}

.post-body .alignfull,
.page-body .alignfull {
  width: 100%;
  max-width: none;
}

/* ---------------------------------------------------------- Chú thích */
.wp-caption {
  max-width: 100%;
  margin-bottom: 18px;
}

.wp-caption img {
  border-radius: var(--radius-md);
}

.wp-caption-text,
.wp-element-caption,
.wp-block-image figcaption,
.wp-block-embed figcaption {
  margin-top: 8px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--color-text-soft);
  text-align: left;
}

/* -------------------------------------------------- Khối Gutenberg */
.wp-block-image img {
  border-radius: var(--radius-md);
}

.wp-block-quote,
.wp-block-pullquote {
  padding: 16px 22px;
  border-left: 4px solid var(--color-gold);
  background-color: var(--color-bg-alt);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--color-navy);
}

.wp-block-quote cite,
.wp-block-pullquote cite {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-sm);
  font-style: normal;
  color: var(--color-text-muted);
}

.wp-block-table table,
.wp-block-table figcaption {
  font-size: var(--fs-sm);
}

.wp-block-table td,
.wp-block-table th {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
}

.wp-block-table th {
  background-color: var(--color-bg-alt);
  color: var(--color-navy);
}

.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin-block: 28px;
}

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border-radius: var(--radius-sm);
  background-color: var(--color-gold);
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: none;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: #fff;
  border: 1.5px solid #8fa6c6;
  color: var(--color-navy);
}

.wp-block-gallery {
  margin-bottom: 18px;
}

.wp-block-embed iframe,
.wp-block-video video,
iframe {
  max-width: 100%;
}

.wp-block-code,
pre {
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border-soft);
  overflow-x: auto;
  font-size: var(--fs-sm);
}

/* Bảng dài không được đẩy vỡ bố cục trên điện thoại */
.post-body table,
.page-body table {
  display: block;
  overflow-x: auto;
  white-space: normal;
}

/* Bảng màu của trình soạn thảo */
.has-tjc-navy-color { color: #001549; }
.has-tjc-ink-color { color: #07233a; }
.has-tjc-text-color { color: #263c7c; }
.has-tjc-gold-color { color: #e0aa52; }
.has-tjc-accent-color { color: #c97a12; }
.has-tjc-navy-background-color { background-color: #001549; }
.has-tjc-ink-background-color { background-color: #07233a; }
.has-tjc-gold-background-color { background-color: #e0aa52; }
.has-tjc-cream-background-color { background-color: #faf9f6; }
.has-tjc-white-background-color { background-color: #ffffff; }

/* ---------------------------------------- Widget do WordPress sinh ra */
/* Widget lõi in ra <ul><li><a> không kèm lớp, nên style thẳng theo thẻ
   để cột bên trông đúng như bản HTML View đã duyệt. */
.widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget ul li + li {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border-soft);
}

.widget ul li a {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-navy);
}

.widget ul li a:hover {
  color: var(--color-accent);
}

.widget ul ul.children {
  margin-top: 10px;
  padding-left: 14px;
}

.widget ul ul.children li:first-child {
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid var(--color-border-soft);
}

.widget .post-date,
.widget .rss-date {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--color-text-soft);
}

.widget select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

.widget .search-form {
  max-width: none;
  flex-wrap: wrap;
}

.widget .search-form .input {
  flex: 1 1 100%;
}

.widget_block h2,
.widget .wp-block-heading {
  font-size: var(--fs-h4);
  margin-bottom: 14px;
  color: var(--color-navy);
}

/* --------------------------------------------- Bài trước / bài sau */
.post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 36px;
  max-width: var(--reading-max);
}

.post-nav__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background-color: #fff;
  box-shadow: var(--shadow-sm);
}

.post-nav__item--sau {
  text-align: right;
  grid-column: 2;
}

.post-nav__item:hover {
  border-color: var(--color-gold-dark);
}

.post-nav__nhan {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
}

.post-nav__tieu-de {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-navy);
}

/* ------------------------------------------------------- Bình luận */
.comments {
  max-width: var(--reading-max);
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border-soft);
}

.comments__title {
  font-size: 24px;
  margin-bottom: 18px;
}

.comment-list,
.comment-list .children {
  list-style: none;
  padding: 0;
}

.comment-list .children {
  margin-left: 26px;
  padding-left: 18px;
  border-left: 2px solid var(--color-border-soft);
}

.comment-list li {
  margin-bottom: 20px;
}

.comment-body {
  padding: 16px 18px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background-color: #fff;
}

.comment-author img {
  border-radius: 50%;
}

.comment-author .fn {
  font-weight: 600;
  color: var(--color-navy);
  font-style: normal;
}

.comment-metadata {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  margin-bottom: 8px;
}

.comment-reply-link {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-accent);
}

.comment-respond {
  margin-top: 28px;
}

.comment-reply-title {
  font-size: 22px;
  margin-bottom: 14px;
}

.comment-form p {
  margin-bottom: 14px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: #fff;
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.comment-form textarea {
  min-height: 130px;
}

.comment-form label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-navy);
}

.comment-form .form-submit input[type="submit"] {
  min-height: 46px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: var(--color-gold);
  color: var(--color-navy);
  font-weight: 600;
  cursor: pointer;
}

/* --------------------------------- Thanh quản trị của WordPress */
/* Header dính phải tụt xuống đúng bằng chiều cao thanh quản trị,
   và CHỈ khi thanh đó thực sự hiện - khách chưa đăng nhập không bị ảnh hưởng. */
.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

@media screen and (max-width: 600px) {
  .admin-bar .site-header {
    top: 0;
  }
}

/* ------------------------------------------- Thành phần phụ khác */
.sticky .post-card__title::before {
  content: "★ ";
  color: var(--color-gold);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.says,
.bypostauthor {
  display: inherit;
}

/* Trang chủ dùng full-bleed nên khối .section thêm vào sau cùng vẫn có lề trên */
.page-home .section + .section {
  padding-top: 0;
}

@media (max-width: 620px) {
  .post-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .post-nav__item--sau {
    grid-column: auto;
    text-align: left;
  }

  .alignleft,
  .alignright {
    float: none;
    margin: 6px 0 18px;
  }
}