/* ====================================================
   DETAIL HERO SECTION (BẢN GỐC EDITORIAL 3 CỘT)
   ==================================================== */
.nk-detail-hero {
  display: grid;
  /* Chia 3 cột: Cột 1 (Ngày/Địa điểm) | Cột 2 (Tiêu đề) | Cột 3 (Ảnh thực địa) */
  grid-template-columns: 160px minmax(450px, 1fr) 1.2fr;
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
}

/* CỘT 1: Ngày & Địa điểm */
.hero-col-meta {
  padding: 60px 0 60px max(30px, 4vw);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 3;
}

.m-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #777;
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.m-val {
  font-size: 13px;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
}
.m-val.loc {
  color: var(--accent-orange);
}

/* CỘT 2: Số 02, Tiêu đề và Mô tả */
.hero-col-content {
  padding: 40px 30px 60px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 3;
}

.hero-num-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}
.hero-num-badge .num {
  font-family: var(--font-condensed);
  font-size: 72px;
  font-weight: 700;
  color: var(--accent-orange);
  line-height: 1;
}
.hero-num-badge .dash {
  width: 40px;
  height: 2px;
  background-color: var(--accent-orange);
}

.hero-main-title {
  font-family: var(--font-condensed);
  font-size: clamp(50px, 6vw, 96px);
  font-weight: 700;
  line-height: 0.82;
  text-transform: uppercase;
  color: #111;
  margin-bottom: 12px;
  letter-spacing: -1.5px;
}

.hero-sub-question {
  font-family: var(--font-condensed);
  font-size: clamp(24px, 3.2vw, 42px);
  font-weight: 700;
  text-transform: uppercase;
  color: #111;
  letter-spacing: -0.5px;
  margin-bottom: 24px;
}

.hero-desc-text {
  font-size: 14px;
  line-height: 1.6;
  color: #444;
  font-weight: 500;
  max-width: 480px;
}

/* CỘT 3: Hình ảnh bên phải có hiệu ứng mờ viền (Gradient Mask) */
.hero-col-image {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
}

.image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Hiệu ứng chuyển sắc làm mờ cạnh trái bức ảnh để tệp vào màu nền trang */
  mask-image: linear-gradient(to right, transparent 0%, black 25%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%);
}

/* Đường line cam */
.curved-line {
  position: absolute;
  bottom: 50px;
  left: -40px;
  width: 320px;
  height: 80px;
  pointer-events: none;
  z-index: 4;
}

/* Thanh tọa độ GPS */
.hero-gps-bar {
  grid-column: 1 / -1; /* Trải dài hết 3 cột */
  border-top: 1px solid rgba(0,0,0,0.15);
  padding: 10px max(30px, 4vw);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #333;
  background-color: transparent;
  z-index: 5;
}
.hero-gps-bar .dot {
  width: 6px;
  height: 6px;
  background-color: var(--accent-orange);
  border-radius: 50%;
}

/* Responsive */
@media (max-width: 1024px) {
  .nk-detail-hero {
    grid-template-columns: 1fr;
  }
  .hero-col-image {
    min-height: 350px;
  }
  .image-wrapper img {
    mask-image: none;
    -webkit-mask-image: none;
  }
  .curved-line {
    display: none;
  }
}

/* ====================================================
   MODULES SECTION (01 TO 04)
   ==================================================== */
.nk-modules {
  background-color: var(--bg-primary);
}

.nk-module-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border-light);
}

.nk-module-row--rev {
  direction: rtl; /* Đảo ngược vị trí Ảnh và Chữ cho nhịp nhàng */
}
.nk-module-row--rev > * {
  direction: ltr;
}

.nk-module-media {
  overflow: hidden;
  min-height: 420px;
}
.nk-module-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nk-module-text {
  padding: 60px max(40px, 5vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mod-num {
  font-family: var(--font-condensed);
  font-size: 48px;
  font-weight: 700;
  color: var(--accent-orange);
  display: flex;
  align-items: center;
  gap: 16px;
  line-height: 1;
  margin-bottom: 16px;
}

.mod-num .line {
  width: 30px;
  height: 2px;
  background-color: var(--accent-orange);
}

.mod-title {
  font-family: var(--font-condensed);
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
  color: #111;
  margin-bottom: 20px;
}

.mod-list {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 24px;
}

.mod-list li {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 8px;
}

.mod-note {
  font-size: 12px;
  background-color: #f4f2ec;
  padding: 14px 18px;
  border-left: 3px solid var(--accent-orange);
  color: #444;
  line-height: 1.5;
}
.mod-note strong {
  color: #111;
  font-weight: 700;
}

/* ====================================================
   QUOTE BANNER DARK (ĐÃ ÉP THẤP CHIỀU CAO)
   ==================================================== */
.detail-quote-banner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  background-color: #111;
  color: #fff;
  overflow: hidden;
}

.quote-left {
  /* Giảm padding trên dưới từ 60px xuống 35px để ép khối chữ mỏng lại */
  padding: 35px max(40px, 5vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.quote-icon {
  font-family: var(--font-hand);
  font-size: 50px; /* Thu nhỏ icon dấu ngoặc kép chút cho cân đối */
  line-height: 1;
  color: var(--accent-orange);
  margin-bottom: 6px;
}

.detail-quote-banner blockquote {
  font-family: var(--font-condensed);
  /* Thu nhỏ size chữ quote một chút (từ 42px xuống 32px) để không bị bè ra quá cao */
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  line-height: 1.25;
}

.quote-author {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent-orange);
}

.quote-right {
  width: 100%;
  /* Ép cứng chiều cao tối đa của ảnh ở mức vừa phải (VD: 240px đến 280px) */
  height: 260px; 
  overflow: hidden;
}

.quote-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(110%);
}

/* Responsive */
@media (max-width: 1024px) {
  .detail-quote-banner {
    grid-template-columns: 1fr;
  }
  .quote-right {
    height: 220px;
  }
}

/* ====================================================
   SUMMARY TABLE & CONCLUSION
   ==================================================== */
.nk-summary-section {
  padding: 80px max(24px, 4vw);
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
}

.summary-heading {
  font-family: var(--font-condensed);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  color: #111;
  margin-bottom: 30px;
  letter-spacing: -0.5px;
}

.summary-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 60px;
}

.summary-table tr {
  border: 1px solid var(--border-light);
  border-right: none;
  border-left: none;
}

.summary-table td {
  padding: 20px 16px;
  font-size: 14px;
  line-height: 1.5;
}

.summary-table .t-label {
  font-weight: 700;
  color: #111;
  width: 220px;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
  border-right: 1px solid var(--border-light);
}

.summary-table .t-val {
  color: #333;
}

/* ====================================================
   KẾT LUẬN CÁ NHÂN (BẢN NGANG 3 CỘT)
   ==================================================== */
.conclusion-row {
  display: grid;
  grid-template-columns: 450px 0.6fr 380px; /* Cột tiêu đề | Cột văn bản | Cột chữ ký */
  align-items: center;
  gap: 40px;
  padding-top: 10px;
}

.conclusion-title {
  font-family: var(--font-condensed);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700;
  text-transform: uppercase;
  color: #111;
  line-height: 1;
  letter-spacing: -1px;
  border-right: 1px solid var(--border-light); /* Đường kẻ ngăn cách dọc */
  padding-right: 30px;
}

.conclusion-text p {
  font-size: 14.5px;
  line-height: 1.65;
  color: #333;
  font-weight: 500;
  margin: 0;
}

.conclusion-sig {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.conclusion-sig img {
  width: 100%;
  max-width: 240px;
  height: auto;
  object-fit: contain;
  /* Nếu ảnh chữ ký có nền trắng, dùng mix-blend-mode để khử nền cho tệp màu giấy */
  mix-blend-mode: multiply; 
}

/* Responsive cho Mobile */
@media (max-width: 1024px) {
  .conclusion-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .conclusion-title {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
    padding-right: 0;
    padding-bottom: 20px;
  }
  .conclusion-sig {
    justify-content: flex-start;
  }
}

.conclusion-content p {
  font-size: 15px;
  line-height: 1.7;
  color: #222;
  margin-bottom: 24px;
  font-weight: 500;
}

.conclusion-signature {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

/* THÊM ĐOẠN NÀY ĐỂ GIỚI HẠN KÍCH THƯỚC CHỮ KÝ */
.conclusion-signature img {
  max-width: 180px; /* Ép chiều rộng tối đa của chữ ký vừa vặn */
  height: auto;     /* Giữ tỷ lệ chuẩn không bị méo ảnh */
  object-fit: contain;
  display: block;
}

conclusion-signature span {
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

/* ====================================================
   POST NAVIGATION
   ==================================================== */
.post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
}

.nav-box {
  padding: 40px max(30px, 4vw);
  display: flex;
  align-items: center;
  gap: 20px;
  transition: background-color 0.2s;
  color: #111;
}

.nav-box:hover {
  background-color: rgba(0,0,0,0.02);
}

.nav-box.prev {
  border-right: 1px solid var(--border-light);
}

.nav-box.next {
  justify-content: flex-end;
}

.nav-arrow {
  font-size: 28px;
  font-weight: 300;
}

.nav-info {
  display: flex;
  flex-direction: column;
}

.text-right {
  text-align: right;
}

.nav-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #777;
  margin-bottom: 4px;
}

.nav-title {
  font-family: var(--font-condensed);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.nav-loc {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-orange);
  letter-spacing: 0.5px;
}

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width: 1024px) {
  .nk-detail-hero {
    grid-template-columns: 1fr;
  }
  .nk-module-row, .nk-module-row--rev {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .conclusion-box {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .summary-table .t-label {
    width: 140px;
  }
  .post-navigation {
    grid-template-columns: 1fr;
  }
  .nav-box.prev {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }
  .nav-box.next {
    justify-content: flex-start;
  }
  .text-right {
    text-align: left;
  }
}