/*
Theme Name:   Người Đẹp
Theme URI:    https://nguoidep.one
Description:  Giao diện tạp chí thời trang & sắc đẹp cho nguoidep.one. Child theme của Astra.
Author:       nguoidep.one
Template:     astra
Version:      1.0.0
Text Domain:  nguoidep
*/

/* ============================================================
   1. Bảng màu và biến
   ============================================================ */
:root {
  --nd-bg:        #f7f2ee;   /* giấy ngà ấm */
  --nd-surface:   #fffdfc;
  --nd-tint:      #f1e5e2;   /* hồng phấn rất nhạt */
  --nd-ink:       #241118;   /* mận đen */
  --nd-ink-2:     #6b5560;
  --nd-ink-3:     #a18d95;
  --nd-accent:    #9d2f56;   /* rượu vang */
  --nd-accent-2:  #c98f74;   /* champagne */
  --nd-line:      #e6d8d2;
  --nd-line-2:    #d2bcb4;

  --nd-serif: "Playfair Display", "Times New Roman", Georgia, serif;
  --nd-sans:  "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   2. Nền và chữ cơ bản
   ============================================================ */
body,
.ast-separate-container {
  background: var(--nd-bg);
  font-family: var(--nd-sans);
  color: var(--nd-ink);
  font-size: 17px;
  line-height: 1.75;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title,
.entry-content :where(h1,h2,h3,h4,h5,h6) {
  font-family: var(--nd-serif);
  color: var(--nd-ink);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.22;
}

a { color: var(--nd-accent); text-decoration: none; }
a:hover, a:focus { color: var(--nd-ink); }

::selection { background: var(--nd-accent); color: #fff; }

/* Nhãn nhỏ chữ hoa giãn — mô-típ lặp lại của toàn bộ giao diện */
.nd-eyebrow,
.ast-taxonomy-container.cat-links {
  display: block;
  font-family: var(--nd-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--nd-accent);
  margin-bottom: 10px;
}

/* ============================================================
   3. Đầu trang
   ============================================================ */
.site-header,
.ast-primary-header-bar,
.ast-header-break-point .site-header {
  background: var(--nd-surface);
  border-bottom: 1px solid var(--nd-line);
  box-shadow: none;
}
.ast-primary-header-bar { border-bottom: none; }

.site-branding img.custom-logo { max-height: 46px; width: auto; }
/* Logo ảnh đã chứa sẵn chữ "Người Đẹp" nên ẩn phần chữ để khỏi lặp.
   Đặt ở đây thay vì Custom CSS của WordPress, vì Custom CSS gắn theo từng theme
   và sẽ mất hiệu lực khi đổi theme. */
.ast-site-title-wrap { display: none; }

.main-header-menu .menu-item > a,
.ast-header-break-point .main-navigation .menu-item > a {
  font-family: var(--nd-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nd-ink-2);
}
.main-header-menu .menu-item > a:hover,
.main-header-menu .current-menu-item > a {
  color: var(--nd-accent);
}
/* gạch chân mảnh khi rê chuột */
.main-header-menu .menu-item { position: relative; }
.main-header-menu .menu-item > a::after {
  content: ""; position: absolute; left: 1em; right: 1em; bottom: 14px;
  height: 1px; background: var(--nd-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .28s ease;
}
.main-header-menu .menu-item:hover > a::after,
.main-header-menu .current-menu-item > a::after { transform: scaleX(1); }

/* ============================================================
   4. Dải mở đầu trang chủ (markup thật, xem functions.php)
   ============================================================ */
/* .ast-container của Astra là flex — ép về block để #primary chiếm trọn bề ngang.
   Kèm width/padding rõ ràng, nếu không trên màn hình hẹp nội dung sẽ rộng hơn
   khung nhìn và bị cắt mất bên phải. */
.site-content > .ast-container {
  display: block;
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
  box-sizing: border-box;
}
#primary {
  width: 100%;
  max-width: 100%;
  min-width: 0;      /* cho phép grid con co lại thay vì đẩy rộng container */
  padding-inline: 0;
}
#primary .site-main { min-width: 0; }
#primary .site-main > .ast-row > .ast-article-post { min-width: 0; }

.nd-hero {
  text-align: center;
  padding: 66px 20px 46px;
  margin-bottom: 4px;
  position: relative;
}
/* nét dọc mảnh chạy xuống, dẫn mắt vào bài dẫn */
.nd-hero::after {
  content: "";
  position: absolute; left: 50%; bottom: -26px;
  width: 1px; height: 46px; background: var(--nd-line-2);
}
.nd-hero__title {
  font-family: var(--nd-serif);
  /* line-height rộng tay: chữ Việt có dấu ở cỡ lớn rất dễ bị cắt ngọn */
  font-size: clamp(34px, 6.4vw, 76px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: 1.08;
  margin: 0 0 18px;
  padding-top: .06em;
}
.nd-hero__sub {
  max-width: 600px;
  margin: 0 auto;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--nd-ink-2);
}

/* ---- dải chạy chữ ---- */
.nd-ticker {
  overflow: hidden;
  background: var(--nd-ink);
  border-bottom: 1px solid var(--nd-ink);
  padding: 9px 0;
  user-select: none;
}
.nd-ticker__track {
  display: flex; align-items: center; gap: 26px;
  width: max-content;
  animation: nd-scroll 46s linear infinite;
}
.nd-ticker__item {
  font-family: var(--nd-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: #f0dfe4; white-space: nowrap;
}
.nd-ticker__dot { color: var(--nd-accent-2); font-size: 9px; }
@keyframes nd-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .nd-ticker__track { animation: none; }
}

/* ---- nhãn dọc bên lề ---- */
.nd-rail {
  position: absolute;
  left: -34px; top: 210px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--nd-sans);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--nd-ink-3);
  white-space: nowrap;
  pointer-events: none;
}
#primary { position: relative; }
@media (max-width: 1360px) { .nd-rail { display: none; } }

/* ============================================================
   5. Lưới bài viết
   ============================================================ */
#primary.ast-blog-layout-4-grid .site-main > .ast-row,
#primary .site-main > .ast-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 52px 34px;
  margin: 0;
  width: 100%;
}
.ast-article-post.ast-grid-common-col {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.ast-article-post .ast-article-inner {
  background: transparent;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ast-article-post .post-content { padding: 0 !important; }
/* Astra luôn in ra .entry-content rỗng ở thẻ bài — bỏ đi cho khỏi sinh hàng thừa */
.ast-article-post .entry-content:empty { display: none; }

/* --- ảnh --- */
.ast-article-post .post-thumb-img-content {
  overflow: hidden;
  border-radius: 2px;
  background: var(--nd-tint);
  margin-bottom: 18px;
}
.ast-article-post .post-thumb-img-content a { display: block; }
.ast-article-post .post-thumb-img-content img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.6,.2,1);
}
.ast-article-post:hover .post-thumb-img-content img { transform: scale(1.05); }

/* --- nhãn chuyên mục (Astra xuất sẵn .ast-taxonomy-container) --- */
.ast-article-post .entry-header { padding: 0; margin: 0; }
.ast-taxonomy-container.cat-links { margin-bottom: 9px; }
.ast-taxonomy-container.cat-links a { color: var(--nd-accent); }
.ast-taxonomy-container.cat-links a:hover { color: var(--nd-ink); }

/* --- tiêu đề --- */
.ast-article-post .entry-title {
  font-size: 22px;
  line-height: 1.34;
  margin: 0 0 10px;
  font-weight: 500;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.ast-article-post .entry-title a { color: var(--nd-ink); transition: color .2s; }
.ast-article-post:hover .entry-title a { color: var(--nd-accent); }

/* --- trích dẫn + ngày --- */
.ast-article-post .ast-excerpt-container p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--nd-ink-2);
  margin: 0 0 12px;
}
.ast-article-post .entry-meta,
.ast-article-post .entry-meta * {
  font-family: var(--nd-sans);
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--nd-ink-3);
  font-weight: 500;
}
.ast-article-post .entry-header { margin-bottom: 10px; }

/* ------------------------------------------------------------
   Bài dẫn — dựng như trang bìa: ảnh bên phải, khối chữ bên trái
   đè lên ảnh một đoạn, tiêu đề cỡ lớn kiểu nghiêng.
   ------------------------------------------------------------ */
#primary.ast-blog-layout-4-grid .site-main > .ast-row > .ast-article-post:first-child,
#primary .site-main > .ast-row > .ast-article-post:first-child {
  grid-column: 1 / -1;
  padding: 30px 0 62px !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid var(--nd-line);
}
#primary .site-main > .ast-row > .ast-article-post:first-child .post-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  grid-auto-rows: min-content;   /* hàng chữ không bị kéo giãn */
  align-content: center;         /* cả khối chữ căn giữa so với ảnh */
}
/* ảnh nằm cột phải, tràn ra mép phải một chút cho thoáng */
/* Ảnh trải hết chiều cao khối chữ.
   Dùng "span 8" chứ KHÔNG dùng "1 / -1": lưới này không khai báo hàng tường minh,
   nên -1 trỏ về vạch cuối của lưới tường minh (chỉ có 1 vạch) và ảnh tụt về hàng 1. */
#primary .site-main > .ast-row > .ast-article-post:first-child .ast-blog-featured-section {
  grid-column: 2; grid-row: 1 / span 8;
  align-self: stretch;
  margin: 0; min-height: 0;
}
#primary .site-main > .ast-row > .ast-article-post:first-child .post-thumb-img-content,
#primary .site-main > .ast-row > .ast-article-post:first-child .post-thumb-img-content a {
  height: 100%;
}
#primary .site-main > .ast-row > .ast-article-post:first-child .post-thumb-img-content {
  margin: 0; border-radius: 0;
}
#primary .site-main > .ast-row > .ast-article-post:first-child .post-thumb-img-content img {
  height: 100%; width: 100%;
  aspect-ratio: auto;
  min-height: 430px;
  object-fit: cover;
}
/* khối chữ đè lên ảnh */
#primary .site-main > .ast-row > .ast-article-post:first-child .ast-taxonomy-container,
#primary .site-main > .ast-row > .ast-article-post:first-child .entry-title,
#primary .site-main > .ast-row > .ast-article-post:first-child .entry-header,
#primary .site-main > .ast-row > .ast-article-post:first-child .ast-excerpt-container {
  grid-column: 1; grid-row: auto;
  position: relative; z-index: 2;
}
#primary .site-main > .ast-row > .ast-article-post:first-child .ast-taxonomy-container {
  margin-left: 8%;
}
#primary .site-main > .ast-row > .ast-article-post:first-child .entry-title {
  font-size: clamp(30px, 4.1vw, 54px);
  font-style: italic;
  font-weight: 400;
  /* Chữ Việt cần khoảng thở cả trên lẫn dưới: dấu mũ/ngã ở trên,
     dấu nặng ở dưới. line-height chật là bị cắt ngay. */
  line-height: 1.2;
  letter-spacing: -0.024em;
  margin: 0 -10% 20px 8%;
  padding: .08em 0 .1em;
  text-wrap: balance;
}
/* Chỉ tiêu đề mới cố ý đè lên ảnh; phần còn lại phải dừng trước mép ảnh. */
#primary .site-main > .ast-row > .ast-article-post:first-child .ast-excerpt-container {
  margin-left: 8%;
  max-width: 24em;
  padding-right: 6%;
}
#primary .site-main > .ast-row > .ast-article-post:first-child .ast-excerpt-container p {
  font-size: 17px; line-height: 1.72; margin-bottom: 16px;
}
#primary .site-main > .ast-row > .ast-article-post:first-child .entry-header {
  margin-left: 8%;
}
/* dòng "Đọc bài" */
#primary .site-main > .ast-row > .ast-article-post:first-child .ast-excerpt-container::after {
  content: "Đọc bài →";
  display: inline-block;
  font-family: var(--nd-sans);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--nd-accent);
  border-bottom: 1px solid var(--nd-accent);
  padding-bottom: 3px;
  transition: gap .2s;
}

/* ------------------------------------------------------------
   Mục lục — đánh số 02, 03... như trang mục lục tạp chí
   ------------------------------------------------------------ */
#primary .site-main > .ast-row { counter-reset: nd-item 1; }
#primary .site-main > .ast-row > .ast-article-post:not(:first-child) {
  counter-increment: nd-item;
  position: relative;
}
#primary .site-main > .ast-row > .ast-article-post:not(:first-child) .ast-taxonomy-container::before {
  content: counter(nd-item, decimal-leading-zero);
  font-family: var(--nd-serif);
  font-style: italic;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--nd-accent-2);
  margin-right: 12px;
  vertical-align: -1px;
}

/* Trước có ô rộng 2 cột xen kẽ cho "phá nhịp", nhưng grid phải bật
   auto-flow dense để lấp chỗ trống, mà dense sắp lại vị trí nên số thứ tự
   nhảy lung tung (02, 03, 05, 04...). Mục lục thì thứ tự quan trọng hơn
   nhịp điệu, nên giữ lưới đều và để số dẫn mắt. */


/* ============================================================
   5b. Trang chủ: bìa + khối theo chuyên mục  (template home.php)
   Markup riêng, không dùng lớp .ast-article-post của Astra.
   ============================================================ */
.nd-home { display: block; }

/* ---------- Bìa ---------- */
.nd-cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  align-items: center;
  padding: 26px 0 60px;
  border-bottom: 1px solid var(--nd-line);
}
/* Khối chữ phải nằm TRÊN ảnh, vì tiêu đề cố ý lấn sang một đoạn.
   Thiếu z-index là ảnh đè lên và mất chữ. */
.nd-cover__text {
  grid-column: 1;
  padding-left: 6%;
  position: relative;
  z-index: 2;
}
.nd-cover__media {
  grid-column: 2;
  display: block; align-self: stretch;
  overflow: hidden; background: var(--nd-tint);
}
.nd-cover__media img {
  display: block; width: 100%; height: 100%;
  min-height: 430px; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.nd-cover:hover .nd-cover__media img { transform: scale(1.04); }

.nd-cover__cat {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: .19em;
  text-transform: uppercase; color: var(--nd-accent); margin-bottom: 12px;
}
.nd-cover__title {
  font-family: var(--nd-serif);
  font-size: clamp(30px, 4.1vw, 54px);
  font-style: italic; font-weight: 400;
  line-height: 1.2; letter-spacing: -.024em;
  /* lấn nhẹ sang ảnh cho có nhịp, nhưng không nhiều tới mức khó đọc */
  margin: 0 -7% 18px 0;
  padding: .08em 0 .1em;
  text-wrap: balance;
}
.nd-cover__title a { color: var(--nd-ink); }
.nd-cover:hover .nd-cover__title a { color: var(--nd-accent); }
.nd-cover__date {
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--nd-ink-3); margin: 0 0 14px;
}
.nd-cover__excerpt {
  font-size: 17px; line-height: 1.72; color: var(--nd-ink-2);
  max-width: 24em; margin: 0 0 20px; padding-right: 6%;
}
.nd-more {
  display: inline-block;
  font-size: 11.5px; font-weight: 600; letter-spacing: .19em;
  text-transform: uppercase; color: var(--nd-accent);
  border-bottom: 1px solid var(--nd-accent); padding-bottom: 3px;
}
.nd-more::after { content: " →"; }

/* ---------- Khối chuyên mục ---------- */
.nd-sec { padding: 54px 0 8px; border-bottom: 1px solid var(--nd-line); }
.nd-sec:last-child { border-bottom: none; }

.nd-sec__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 6px 24px;
  margin-bottom: 34px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--nd-line);
}
.nd-sec__title {
  grid-column: 1;
  font-family: var(--nd-serif);
  font-size: clamp(25px, 3vw, 36px);
  font-style: italic; font-weight: 400;
  letter-spacing: -.02em; line-height: 1.25;
  margin: 0; padding-bottom: .05em;
}
.nd-sec__desc {
  grid-column: 1; grid-row: 2;
  margin: 0; font-size: 14.5px; color: var(--nd-ink-2); max-width: 46em;
}
.nd-sec__all {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-size: 11px; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--nd-ink-2);
  white-space: nowrap;
  border-bottom: 1px solid var(--nd-line-2); padding-bottom: 3px;
  transition: color .2s, border-color .2s;
}
.nd-sec__all::after { content: " →"; }
.nd-sec__all:hover { color: var(--nd-accent); border-bottom-color: var(--nd-accent); }

.nd-sec__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 34px;
}

/* ---------- Thẻ bài ---------- */
.nd-card { display: flex; flex-direction: column; min-width: 0; }
.nd-card__media {
  display: block; overflow: hidden;
  background: var(--nd-tint); margin-bottom: 16px;
}
.nd-card__media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.6,.2,1);
}
.nd-card:hover .nd-card__media img { transform: scale(1.05); }

.nd-card__meta {
  margin: 0 0 8px;
  display: flex; align-items: baseline; gap: 11px;
}
.nd-card__num {
  font-family: var(--nd-serif); font-style: italic;
  font-size: 18px; color: var(--nd-accent-2);
}
.nd-card__cat {
  font-size: 11px; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--nd-accent);
}
.nd-card__title {
  font-family: var(--nd-serif);
  font-size: 21px; font-weight: 500; line-height: 1.34;
  letter-spacing: -.012em; margin: 0 0 8px;
  text-wrap: balance;
}
.nd-card__title a { color: var(--nd-ink); }
.nd-card:hover .nd-card__title a { color: var(--nd-accent); }
.nd-card__date {
  margin: 0 0 9px;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--nd-ink-3);
}
.nd-card__excerpt {
  margin: 0; font-size: 14.5px; line-height: 1.66; color: var(--nd-ink-2);
}

/* ---------- Màn hình nhỏ ---------- */
@media (max-width: 1100px) {
  .nd-sec__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
}

/* Điện thoại.
   Đo ở khổ 375px, bản 3 cột xếp dọc cho trang cao 6316px với 38% chiều cao
   chỉ là ảnh — cuộn rất nhiều mà đọc được rất ít. Nên đổi cách bày:
   bài đầu mỗi khối giữ ảnh lớn, các bài sau chuyển thành hàng ngang
   ảnh nhỏ bên trái. */
@media (max-width: 640px) {
  /* --- bìa --- */
  .nd-cover { grid-template-columns: 1fr; padding: 8px 0 34px; }
  .nd-cover__text { grid-column: 1; grid-row: 2; padding-left: 0; padding-top: 16px; }
  .nd-cover__media { grid-column: 1; grid-row: 1; }
  .nd-cover__media img { min-height: 0; aspect-ratio: 16 / 10; }
  .nd-cover__title { font-size: 26px; line-height: 1.24; margin: 0 0 12px; }
  .nd-cover__excerpt { padding-right: 0; font-size: 15.5px; margin-bottom: 14px; }
  .nd-cover__date { margin-bottom: 10px; }

  /* --- khối chuyên mục --- */
  .nd-sec { padding: 30px 0 6px; }
  .nd-sec__head { margin-bottom: 20px; padding-bottom: 12px; }
  .nd-sec__title { font-size: 24px; }
  .nd-sec__desc { font-size: 14px; }
  .nd-sec__grid { display: flex; flex-direction: column; gap: 20px; }

  /* --- thẻ dạng hàng ngang --- */
  .nd-card { flex-direction: row; align-items: flex-start; gap: 14px; }
  .nd-card__media {
    flex: 0 0 108px; margin-bottom: 0;
  }
  .nd-card__media img { aspect-ratio: 1 / 1; }
  .nd-card__body { min-width: 0; }
  .nd-card__meta { margin-bottom: 5px; }
  .nd-card__num { font-size: 15px; }
  .nd-card__cat { font-size: 10px; letter-spacing: .14em; }
  .nd-card__title { font-size: 17px; line-height: 1.32; margin-bottom: 5px; }
  .nd-card__date { font-size: 10.5px; margin-bottom: 0; }
  .nd-card__excerpt { display: none; }

  /* bài đầu mỗi khối vẫn để ảnh lớn cho có điểm nhấn */
  .nd-card:first-child { flex-direction: column; gap: 0; }
  .nd-card:first-child .nd-card__media {
    flex: none; width: 100%; margin-bottom: 13px;
  }
  .nd-card:first-child .nd-card__media img { aspect-ratio: 16 / 10; }
  .nd-card:first-child .nd-card__title { font-size: 21px; }
  .nd-card:first-child .nd-card__date { margin-bottom: 8px; }
  .nd-card:first-child .nd-card__excerpt { display: block; font-size: 14.5px; }

  /* --- vùng chạm đủ lớn: chuẩn tối thiểu 44px --- */
  .nd-more, .nd-sec__all {
    display: inline-flex; align-items: center;
    gap: .45em;                 /* inline-flex nuốt khoảng trắng trước mũi tên */
    min-height: 44px; padding: 0 2px;
    border-bottom: none;
  }
  .nd-more::after, .nd-sec__all::after { content: "→"; }
  .nd-more { border-bottom: 1px solid var(--nd-accent); padding-bottom: 0; }
  .nd-sec__all {
    grid-column: 1; grid-row: 3; justify-self: start;
    border-bottom: 1px solid var(--nd-line-2);
  }
  .nd-card__title a, .nd-card__cat, .nd-cover__cat {
    display: inline-block; padding: 2px 0;
  }

  /* --- dải chạy chữ gọn lại --- */
  .nd-ticker { padding: 7px 0; }
  .nd-ticker__item { font-size: 10px; letter-spacing: .22em; }

  /* --- dải mở đầu --- */
  .nd-hero { padding: 30px 4px 22px; }
  .nd-hero::after { height: 30px; bottom: -18px; }
  .nd-hero__sub { font-size: 15px; }
}

/* ============================================================
   6. Trang lưu trữ chuyên mục
   ============================================================ */
/* Astra bọc khối này trong .ast-separate-container nên cần selector đủ mạnh
   mới ghi đè được nền trắng và canh lề mặc định. */
.ast-separate-container .ast-archive-description,
.ast-plain-container .ast-archive-description,
.ast-archive-description {
  text-align: center;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--nd-line);
  border-radius: 0;
  padding: 50px 20px 40px;
  margin: 0 0 44px;
}
.ast-separate-container .ast-archive-description .ast-archive-title,
.ast-archive-description .ast-archive-title,
.ast-archive-description h1 {
  font-family: var(--nd-serif);
  font-size: clamp(30px, 4.6vw, 46px);
  font-style: italic;
  font-weight: 400;
  text-align: center;
  margin: 0 0 12px;
}
.ast-archive-description .ast-archive-description-title,
.ast-archive-description p {
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
  color: var(--nd-ink-2);
  font-size: 16px;
}

/* ============================================================
   7. Bài viết đơn
   ============================================================ */
.single .site-content > .ast-container,
.page .site-content > .ast-container { padding-top: 8px; }

.single .ast-article-single,
.page .ast-article-single {
  background: var(--nd-surface);
  border: 1px solid var(--nd-line);
  border-radius: 3px;
  padding: clamp(28px, 5vw, 70px) clamp(20px, 5vw, 78px);
}

.single .ast-article-single .entry-header,
.page .ast-article-single .entry-header {
  text-align: center;
  padding-bottom: 26px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--nd-line);
}
.single .ast-taxonomy-container.cat-links { margin-bottom: 12px; }

.single .entry-title, .page .entry-title {
  font-size: clamp(30px, 4.4vw, 47px);
  line-height: 1.15;
  margin: 0 0 14px;
  font-weight: 600;
}
.single .entry-meta, .single .entry-meta * {
  font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--nd-ink-3); font-weight: 500;
}

.single .post-thumb-img-content,
.single .ast-single-post-featured-section img {
  border-radius: 2px; overflow: hidden;
}

/* --- thân bài --- */
.entry-content {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 17.5px;
  line-height: 1.82;
  color: #33232b;
}
.entry-content > p:first-of-type { font-size: 19.5px; line-height: 1.72; color: var(--nd-ink); }

.entry-content h2 {
  font-size: clamp(24px, 3vw, 31px);
  margin: 2.1em 0 .6em;
  padding-top: .55em;
  border-top: 1px solid var(--nd-line);
}
.entry-content h3 { font-size: 22px; margin: 1.7em 0 .5em; }
.entry-content p { margin: 0 0 1.15em; }
.entry-content strong { font-weight: 600; color: var(--nd-ink); }
.entry-content em { font-style: italic; }

.entry-content a {
  color: var(--nd-accent);
  border-bottom: 1px solid var(--nd-line-2);
  transition: border-color .2s;
}
.entry-content a:hover { border-bottom-color: var(--nd-accent); }

.entry-content ul, .entry-content ol { margin: 0 0 1.3em; padding-left: 1.35em; }
.entry-content li { margin-bottom: .5em; }
.entry-content ul li::marker { color: var(--nd-accent-2); }
.entry-content ol li::marker { color: var(--nd-accent); font-weight: 600; }

.entry-content code {
  background: var(--nd-tint); padding: .12em .4em; border-radius: 3px;
  font-size: .88em; color: #7d2f4d;
}

/* bảng kiểu tạp chí */
.entry-content table {
  width: 100%; border-collapse: collapse; margin: 1.7em 0; font-size: 15.5px;
}
.entry-content table th {
  text-align: left; font-family: var(--nd-sans);
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--nd-ink-2); font-weight: 600;
  border-bottom: 1.5px solid var(--nd-line-2); padding: 10px 12px;
}
.entry-content table td {
  padding: 12px; border-bottom: 1px solid var(--nd-line); vertical-align: top;
  line-height: 1.6;
}
.entry-content table tr:last-child td { border-bottom: none; }

/* khối ghi chú sức khoẻ ở cuối mỗi bài */
.entry-content .wp-block-group.has-background {
  background: var(--nd-tint) !important;
  border-left: 3px solid var(--nd-accent);
  border-radius: 0 4px 4px 0 !important;
  padding: 20px 24px !important;
  margin: 2.2em 0 0;
  font-size: 15px;
  line-height: 1.68;
  color: var(--nd-ink-2);
}
.entry-content .wp-block-group.has-background p:last-child { margin-bottom: 0; }
.entry-content .wp-block-group.has-background strong { color: var(--nd-ink); }

/* ============================================================
   8. Chân trang
   ============================================================ */
.site-footer, .ast-small-footer {
  background: var(--nd-ink);
  border-top: none;
  color: #cbb9c1;
}
.site-footer a, .ast-small-footer a { color: #e6d3da; }
.site-footer a:hover { color: #fff; }
.ast-small-footer { font-size: 13.5px; letter-spacing: .04em; }

/* ============================================================
   9. Màn hình nhỏ
   Lưu ý: selector gốc có kèm .ast-blog-layout-4-grid nên độ ưu tiên cao;
   media query phải lặp lại đúng cặp selector đó, nếu không sẽ không thắng.
   ============================================================ */
/* Khoảng 922–1240px: Astra vẫn dùng header desktop nhưng menu 6 mục
   không đủ chỗ nên rớt xuống hai dòng. Bóp chữ và khoảng đệm cho vừa. */
@media (min-width: 922px) and (max-width: 1240px) {
  .main-header-menu .menu-item > a,
  .ast-header-break-point .main-navigation .menu-item > a {
    font-size: 11px;
    letter-spacing: .09em;
    padding-left: 9px;
    padding-right: 9px;
  }
  .main-header-menu .menu-item > a::after { left: .7em; right: .7em; }
}

@media (max-width: 1100px) {
  #primary.ast-blog-layout-4-grid .site-main > .ast-row,
#primary .site-main > .ast-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 28px;
  }
}

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

  #primary.ast-blog-layout-4-grid .site-main > .ast-row,
#primary .site-main > .ast-row {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  #primary.ast-blog-layout-4-grid .site-main > .ast-row > .ast-article-post:first-child,
#primary .site-main > .ast-row > .ast-article-post:first-child {
    padding-bottom: 34px !important;
  }
  #primary.ast-blog-layout-4-grid .site-main > .ast-row > .ast-article-post:first-child,
#primary .site-main > .ast-row > .ast-article-post:first-child .post-content {
    display: block;
  }
  #primary.ast-blog-layout-4-grid .site-main > .ast-row > .ast-article-post:first-child,
#primary .site-main > .ast-row > .ast-article-post:first-child .ast-blog-featured-section {
    margin-bottom: 16px;
  }
  #primary.ast-blog-layout-4-grid .site-main > .ast-row > .ast-article-post:first-child,
#primary .site-main > .ast-row > .ast-article-post:first-child .entry-title {
    font-size: 27px;
  }
  #primary.ast-blog-layout-4-grid .site-main > .ast-row > .ast-article-post:first-child,
#primary .site-main > .ast-row > .ast-article-post:first-child .ast-excerpt-container p {
    font-size: 16px;
  }

  .nd-hero { padding: 34px 4px 28px; margin-bottom: 30px; }
  .nd-hero__sub { font-size: 15.5px; }

  .entry-content { font-size: 16.5px; }
  .entry-content > p:first-of-type { font-size: 18px; }
  .single .ast-article-single, .page .ast-article-single { padding: 26px 20px; }

  /* bảng rộng thì cho cuộn riêng thay vì làm vỡ trang */
  .entry-content table { display: block; overflow-x: auto; }
  .entry-content table th, .entry-content table td { white-space: normal; min-width: 130px; }
}

/* Chặn tràn ngang ở mọi kích thước */
html, body { overflow-x: hidden; }
img, table, pre { max-width: 100%; }